내가 만들고있는 페이지에 5 개의 동일한 열이 있고 5 열 그리드가 어떻게 사용되는지 이해할 수없는 것 같습니다 :
http://web.archive.org/web/20120416024539/http://domain7 .com / mobile / tools / bootstrap / responsive

트위터 부트 스트랩 프레임 워크의 일부 위에 5 개의 열 그리드가 표시됩니까?

답변

span2 클래스에 5 개의 div를 사용하고 첫 번째 클래스에 offset1 클래스를 제공하십시오.

<div class="row-fluid">
    <div class="span2 offset1"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
</div>

짜잔! 동일 간격으로 중앙에 위치한 5 개의 열.

부트 스트랩 3.0 에서이 코드는 다음과 같습니다

<div class="row">
    <div class="col-md-2 col-md-offset-1"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
</div>

답변

부트 스트랩 3 이상

Twitter Bootstrap을 사용한 환상적인 전폭 5 열 레이아웃이 여기 에 만들어졌습니다 .

이 솔루션은 Bootstrap 3과 완벽하게 작동하므로 가장 진보 된 솔루션입니다. 반응 형 디자인을 위해 현재 Bootstrap 클래스와 함께 클래스를 반복해서 재사용 할 수 있습니다.

CSS :
글로벌 스타일 시트 나 bootstrap.css문서 의 맨 아래에 추가하십시오 .

.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.col-xs-5ths {
    width: 20%;
    float: left;
}

@media (min-width: 768px) {
    .col-sm-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 992px) {
    .col-md-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-5ths {
        width: 20%;
        float: left;
    }
}

사용하십시오!
예를 들어, 중간 화면에서는 5 개의 열 레이아웃처럼 작동하고 작은 화면에서는 2 개의 열처럼 작동하는 div 요소를 만들려면 다음과 같은 것을 사용해야합니다.

<div class="row">
    <div class="col-md-5ths col-xs-6">
       ...
    </div>
</div>

작업 데모 -프레임을 확장하면 열이 반응하는 것을 볼 수 있습니다.

ANOTHER DEMO – 새로운 통합col-*-5ths과 같은 다른 사람들과 수업을col-*-3하고col-*-2. 프레임의 크기를 조정하여col-xs-6반응 형보기에서모두 변경되는 것을 확인하십시오.

부트 스트랩 4

부트 스트랩 4는 이제 기본적으로 flexbox를 사용하므로 상자에서 바로 마법의 힘에 액세스 할 수 있습니다. 중첩되는 열 수에 따라 너비를 동적으로 조정 하는 자동 레이아웃 열 을 확인하십시오 .

예를 들면 다음과 같습니다.

<div class="row">
   <div class="col">
      1 of 5
   </div>
   <div class="col">
      2 of 5
   </div>
   <div class="col">
      3 of 5
   </div>
   <div class="col">
      4 of 5
   </div>
   <div class="col">
      5 of 5
   </div>
</div>

작업 데모

답변

들어 부트 스트랩 3 원하는 경우, 전체 폭을 하고 사용하고 LESS, SASS비슷한, 또는, 당신이 할 일은의 메이크업의 사용이다 부트 스트랩의 믹스 인 기능 make-md-column , make-sm-column등

적게:

.col-lg-2-4{
  .make-lg-column(2.4)
}
.col-md-2-4{
  .make-md-column(2.4)
}
.col-sm-2-4{
  .make-sm-column(2.4)
}

SASS :

.col-lg-2-4{
  @include make-lg-column(2.4)
}
.col-md-2-4{
  @include make-md-column(2.4)
}
.col-sm-2-4{
  @include make-sm-column(2.4)
}

뿐만 아니라 당신은 구축 할 수 있습니다 진정한 전체 폭 부트 스트랩 열 수업 이 유지 mixin을 사용하여,하지만 당신은 또한 모든 구축 할 수 관련 헬퍼 클래스 처럼 .col-md-push-*, .col-md-pull-*그리고 .col-md-offset-*:

적게:

.col-md-push-2-4{
  .make-md-column-push(2.4)
}
.col-md-pull-2-4{
  .make-md-column-pull(2.4)
}
.col-md-offset-2-4{
  .make-md-column-offset(2.4)
}

SASS :

.col-md-push-2-4{
  @include make-md-column-push(2.4)
}
.col-md-pull-2-4{
  @include make-md-column-pull(2.4)
}
.col-md-offset-2-4{
  @include make-md-column-offset(2.4)
}

다른 답변 @gridColumns은 완벽하게 유효하지만 모든 부트 스트랩의 코어 열 너비를 변경하는 설정에 대해 이야기합니다 . 위의 믹스 인 기능을 사용하면 기본 부트 스트랩 열 위에 5 개의 열 레이아웃이 추가되므로 타사 도구 나 기존 스타일이 손상되지 않습니다.

답변

2019 업데이트

부트 스트랩 4.1 이상

자동 레이아웃 그리드를 사용하는 5 개의 동일한 전폭 열 ( 추가 CSS 또는 SASS 없음 )은 다음과 같습니다.

<div class="container-fluid">
    <div class="row">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
        <div class="col">4</div>
        <div class="col">5</div>
    </div>
</div>

http://www.codeply.com/go/MJTglTsq9h

이 솔루션은 이제 Bootstrap 4가 flexbox이기 때문에 작동합니다. 당신은 5 열이 같은 내 포장 얻을 수 .row같은 휴식을 사용 <div class="col-12"></div>또는 <div class="w-100"></div>매 5 열.

참조 : 부트 스트랩 – 5 열 레이아웃

답변

아래는 @machineaddict와 @Mafnah 답변의 조합이며 Bootstrap 3 용으로 다시 작성되었습니다 (지금까지 잘 작동합니다).

@media (min-width: 768px){
    .fivecolumns .col-md-2, .fivecolumns .col-sm-2, .fivecolumns .col-lg-2  {
        width: 20%;
        *width: 20%;
    }
}
@media (min-width: 1200px) {
    .fivecolumns .col-md-2, .fivecolumns .col-sm-2, .fivecolumns .col-lg-2 {
        width: 20%;
        *width: 20%;
    }
}
@media (min-width: 768px) and (max-width: 979px) {
    .fivecolumns .col-md-2, .fivecolumns .col-sm-2, .fivecolumns .col-lg-2 {
        width: 20%;
        *width: 20%;
    }
}

답변

원래 부트 스트랩을 12 열로 유지하고 사용자 정의하지 마십시오. 당신이해야 할 유일한 수정은 다음과 같이 원래 부트 스트랩 응답 CSS 후 일부 CSS입니다 .

다음 코드는 Bootstrap 2.3.2에서 테스트되었습니다.

<style type="text/css">
/* start of modification for 5 columns */
@media (min-width: 768px){
    .fivecolumns .span2 {
        width: 18.297872340425532%;
        *width: 18.2234042553191494%;
    }
}
@media (min-width: 1200px) {
    .fivecolumns .span2 {
        width: 17.9487179487179488%;
        *width: 17.87424986361156592%;
    }
}
@media (min-width: 768px) and (max-width: 979px) {
    .fivecolumns .span2 {
        width: 17.79005524861878448%;
        *width: 17.7155871635124022%;
    }
}
/* end of modification for 5 columns */
</style>

그리고 HTML :

<div class="row-fluid fivecolumns">
    <div class="span2">
        <h2>Heading</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
    <div class="span2">
        <h2>Heading</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
    <div class="span2">
        <h2>Heading</h2>
        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
    <div class="span2">
        <h2>Heading</h2>
        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
    <div class="span2">
        <h2>Heading</h2>
        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
</div>

참고 : span2 곱하기 5는 12 열과 같지 않지만 아이디어는 있습니다. 🙂

실제 예제는 http://jsfiddle.net/v3Uy5/6/ 에서 찾을 수 있습니다.

답변

정확히 같은 너비의 열이 필요하지 않은 경우 중첩을 사용하여 5 열을 만들 수 있습니다.

<div class="container">
    <div class="row">
        <div class="col-xs-5">
            <div class="row">
                <div class="col-xs-6 column">Column 1</div>
                <div class="col-xs-6 column">Column 2</div>
            </div>
        </div>
        <div class="col-xs-7">
            <div class="row">
                <div class="col-xs-4 column">Column 3</div>
                <div class="col-xs-4 column">Column 4</div>
                <div class="col-xs-4 column">Column 5</div>
            </div>
        </div>
    </div>
</div>

jsfiddle

처음 두 열의 너비는 5/12 * 1/2 ~ 20.83 %입니다.

마지막 3 개 열 : 7/12 * 1/3 ~ 19.44 %

이러한 해킹은 많은 경우에 허용 가능한 결과를 제공하며 CSS 변경이 필요하지 않습니다 (기본 부트 스트랩 클래스 만 사용함).