[twitter-bootstrap] Bootstrap 3.0-고정 열 크기를 포함하는 유동 격자

Program / 글쓴이

Bootstrap 사용법을 배우고 있습니다. 현재 레이아웃을 넘어 가고 있습니다. 부트 스트랩은 꽤 멋지지만 내가 보는 모든 것은 오래된 것 같습니다. 내 인생에는 내가 이해할 수없는 기본 레이아웃이라고 생각하는 것이 있습니다. 내 레이아웃은 다음과 같습니다.

---------------------------------------------------------------------------
|       |       |                                                         |
|       |       |                                                         |
| 240px | 160px | All Remaining Width of the Window                       |
|       |       |                                                         |
|       |       |                                                         |
--------------------------------------------------------------------------|

이 격자는 창의 전체 높이를 차지해야합니다. 내 이해에서 고정 너비와 유체 너비를 혼합해야합니다. 그러나 Bootstrap 3.0에는 더 이상 유동성 클래스가없는 것 같습니다. 그래도 유체와 고정 컬럼 크기를 혼합하는 방법을 알 수없는 것 같습니다. 누구든지 Bootstrap 3.0 에서이 작업을 수행하는 방법을 알고 있습니까?

답변

유체와 고정 폭을 Bootstrap 3과 혼합하는 쉬운 방법은 실제로 없습니다. 그리드 시스템은 유동적이고 반응적인 것으로 설계 되었기 때문에 이와 같은 의미입니다. 해킹을 시도해 볼 수도 있지만 반응 형 그리드 시스템이 수행하려는 작업과 반대되는 결과를 낳을 수 있습니다.

이 레이아웃을 고수 해야하는 경우 그리드를 사용하지 않고 사용자 정의 CSS로 페이지를 레이아웃하는 것이 좋습니다.

답변

편집 : 많은 사람들이 이것을하고 싶어하는 것처럼, 나는 https://www.atlascode.com/bootstrap-fixed-width-sidebars/ 보다 일반적인 사용 사례와 함께 간단한 안내서를 작성했습니다 . 도움이 되길 바랍니다.

bootstrap3 그리드 시스템은 고정 너비 사이드 메뉴를 허용하도록 루트 행을 조정할 수있는 행 중첩을 지원합니다.

루트 행에 왼쪽 여백을 넣은 다음 일반 그리드 레이아웃 요소가 포함 된 자식 행이 있어야합니다.

여기 내가 일반적으로 이것을하는 방법이
http://jsfiddle.net/u9gjjebj/

html

<div class="container">
    <div class="row">
        <div class="col-fixed-240">Fixed 240px</div>
        <div class="col-fixed-160">Fixed 160px</div>
        <div class="col-md-12 col-offset-400">
            <div class="row">
            Standard grid system content here
            </div>
        </div>
    </div>
</div>

CSS

.col-fixed-240{
    width:240px;
    background:red;
    position:fixed;
    height:100%;
    z-index:1;
}

.col-fixed-160{
    margin-left:240px;
    width:160px;
    background:blue;
    position:fixed;
    height:100%;
    z-index:1;
}

.col-offset-400{
    padding-left:415px;
    z-index:0;
}

답변

또는 표 셀과 함께 표시 속성을 사용하십시오.

CSS

.table-layout {
    display:table;
    width:100%;
}
.table-layout .table-cell {
    display:table-cell;
    border:solid 1px #ccc;
}

.fixed-width-200 {
    width:200px;
}

html

<div class="table-layout">
    <div class="table-cell fixed-width-200">
        <p>fixed width div</p>
    </div>
    <div class="table-cell">
        <p>fluid width div</p>    
    </div>
</div>

http://jsfiddle.net/DnGDz/

답변

약간 다른 문제가있었습니다.

  • 전체 창 레이아웃의 일부가 아닌 고정 된 열과 유동적 인 열을 테이블의 일부로 결합해야했습니다.
  • 왼쪽과 오른쪽에 열을 고정해야했습니다.
  • 포함 행의 전체 높이를 사용하여 열 배경에 대해 걱정하지 않았습니다.

결과적으로 float왼쪽 및 오른쪽 열에 의존 한 다음 부트 스트랩을 사용 row하여 사이에 유체 열을 수행 할 수있었습니다 .

<div>
    <div class="pull-left" style="width:240px">Fixed 240px</div>
    <div class="pull-right" style="width:120px">Fixed 120px</div>
    <div style="margin-left:240px;margin-right:120px">
        <div class="row" style="margin:0px">
            Standard grid system content here
        </div>
    </div>
</div>

답변

2018 업데이트

Bootstrap 3에서 이것에 접근하는 가장 좋은 방법 인 IMO는 Bootstrap의 중단 점과 일치하는 미디어 쿼리를 사용하여 고정 너비 열만 큰 화면을 사용하고 레이아웃이 작은 화면에서 응답 적으로 스택되도록하는 것입니다. 이런 식으로 당신은 응답 성을 유지합니다 …

@media (min-width:768px) {
  #sidebar {
      width: inherit;
      min-width: 240px;
      max-width: 240px;
      min-height: 100%;
      position:relative;
  }
  #sidebar2 {
      min-width: 160px;
      max-width: 160px;
      min-height: 100%;
      position:relative;
  }
  #main {
      width:calc(100% - 400px);
  }
}

Working Bootstrap Fixed-Fluid Demo

부트 스트랩 4 에는 flexbox가 있으므로 다음과 같은 레이아웃이 훨씬 쉬워집니다 : http://www.codeply.com/go/eAYKvDkiGw

답변

좋아, 내 대답은 훌륭합니다.

<style>
    #wrapper {
        display:flex;    
        width:100%;
        align-content: streach;
        justify-content: space-between;
    }    

    #wrapper div {
        height:100px;
    }

    .static240 {
        flex: 0 0 240px;
    }
    .static160 {
        flex: 0 0 160px;
    }

    .growMax {
        flex-grow: 1;
    }

</style>

<div id="wrapper">
  <div class="static240" style="background:red;" > </div>
  <div class="static160"  style="background: green;" > </div> 
  <div class="growMax"  style="background:yellow;"  ></div>
</div>

jsfiddle 놀이터

모든 브라우저를 지원하려면 https://github.com/10up/flexibility를 사용 하십시오.

답변

업데이트 2014-11-14 : 아래 솔루션이 너무 오래되었으므로 플렉스 박스 레이아웃 방법을 사용하는 것이 좋습니다. 개요는 다음과 같습니다. http://learnlayout.com/flexbox.html

내 솔루션

html

<li class="grid-list-header row-cw row-cw-msg-list ...">
  <div class="col-md-1 col-cw col-cw-name">
  <div class="col-md-1 col-cw col-cw-keyword">
  <div class="col-md-1 col-cw col-cw-reply">
  <div class="col-md-1 col-cw col-cw-action">
</li>

<li class="grid-list-item row-cw row-cw-msg-list ...">
  <div class="col-md-1 col-cw col-cw-name">
  <div class="col-md-1 col-cw col-cw-keyword">
  <div class="col-md-1 col-cw col-cw-reply">
  <div class="col-md-1 col-cw col-cw-action">
</li>

scss

.row-cw {
  position: relative;
}

.col-cw {
  position: absolute;
  top: 0;
}


.ir-msg-list {

  $col-reply-width: 140px;
  $col-action-width: 130px;

  .row-cw-msg-list {
    padding-right: $col-reply-width + $col-action-width;
  }

  .col-cw-name {
    width: 50%;
  }

  .col-cw-keyword {
    width: 50%;
  }

  .col-cw-reply {
    width: $col-reply-width;
    right: $col-action-width;
  }

  .col-cw-action {
    width: $col-action-width;
    right: 0;
  }
}

부트 스트랩 레이아웃 코드를 너무 많이 수정하지 않고

업데이트 (OP가 아닌) : 이 답변을 쉽게 이해할 수 있도록 아래 코드 스 니펫을 추가하십시오. 그러나 예상대로 작동하지 않는 것 같습니다.

코드 스 니펫 표시