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


126

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

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

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


행과 열과 함께 테이블을 사용하십시오.
kalu

다음은 부트 스트랩 3에 대한 고정 유체 예제입니다. codeply.com/go/GN4QinVrjI
Zim

답변:


32

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

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


5
Flexbox가 완전히 지원하기를 기다려야 할 것 같지만 여전히 절름발이입니다. 부트 스트랩의 모델은 열 수가 정적 일 때 유용하지만, 예를 들어 열을 동적으로 숨기고 표시 할 수있는 경우 최소한 하나의 열을 유동적으로 지원하면 훨씬 더 이해하기 시작합니다.
네이트 번디

1
솔루션에이 링크에 대한 참조를 포함하도록 답변을 편집하십시오. 감사합니다 : stackoverflow.com/questions/8740779/…
Morty

151

편집 : 많은 사람들이 이것을하고 싶어하는 것처럼, 나는 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;
}

이것은 좋지만 고정 열 안에 넣으면 예를 들어 <p> <a class="btn btn-default" href="#" role="button"> 세부 정보보기 & raquo; </a> </ p> 또는 부트 스트랩 드롭 다운하면 고정 열에서 작동하지 않습니다. 이것에 대한 해결책이 있습니까?
Vaclav Elias

@VaclavElias는 position : relative와 드롭 다운으로 전체 크기 차이를 넣으려고합니까? 문제를 보여주기 위해 jsfiddle을 만들면 도움이됩니다.
w00t

나는 이것이 모든 브라우저에서 어떻게 작동하는지 아직 보지 못했지만, 그렇지 않으면 잘했습니다.
Phil Cooper

오른쪽의 고정 열 로이 작업을 수행하는 방법이 있습니까?
Sean

3
position: fixed해당 열의 내용을 스크롤 할 때 나머지 페이지 위에 떠 있음을 의미합니다. 내 경우에는을 사용하여 수정했습니다 position: absolute.
laurent

26

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

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/


1
문제는 당신이 예를 사용하는 경우입니다. `.visible는-XS , becouse 디스플레이 : 테이블 cell`이 될 display:block...
다리우스 Filipiak

21

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

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

결과적으로 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>

4
@Schemetrical 질문이 없습니다. 나는 약간 다른 문제가 있다고 설명하고 Google에서 온 다른 사람들을 돕기 위해 해결책을 추가했습니다.
패디 맨

1
당신의 대답은 귀중합니다. 아주 간단하지만 내 문제를 해결합니다. 고마워
찰스

포함 된 div가 답변에 여백을 줄 div에 줄 수없는 이유는 무엇입니까?
GreenAsJade

이 답변은 매우 합법적입니다. 부트 스트랩 열을 사용해야하지만 특정 화면 너비에서 축소하지 않으려면 이것이 필요합니다 (예 : col-md-3 대신 왼쪽 / 풀 오른쪽 사용).
Sam

이것은 좋은 대답처럼 보입니다. 나는 몇 가지 문제에 봉착 margin하고 padding중간에 내 연속하지만 그건 solveable 문제가 될 것이다. 이 방법을 사용하면 의도하지 않은 결과는 무엇입니까?
Vishal

15

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


3

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

<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를 사용 하십시오.


1

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


-1이 대답은 나에게 의미가 없습니다. 열의 합계는 12가 아닙니다. 이름과 키보드 열이 겹칩니다. +2 투표가 어떻게되는지 이해가되지 않습니다.
Mariano Desanze

-3

왜 자신의 CSS에서 왼쪽 두 열을 고정으로 설정하고 나머지 내용에 대해 전체 12 열의 새로운 그리드 레이아웃을 만드십시오.

<div class="row">
    <div class="fixed-1">Left 1</div>
    <div class="fixed-2">Left 2</div>
    <div class="row">
        <div class="col-md-1"></div>
        <div class="col-md-11"></div>
    </div>
</div>

부트 스트랩에서 열만 행의 직계 자식이 될 수 있습니다.
Sai Dubbaka
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.