트위터 부트 스트랩에 동일한 열 5 개

361

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

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

twitter-bootstrap  twitter-bootstrap-3  bootstrap-4 
— 간달프
소스
부트 스트랩의 매우 오래된 버전을보고 있습니다. (최신, 희망) 부트 스트랩에 5 열 "응답"그리드를 원하십니까?
— Andres Ilich
3
언급 한 것은 v1.3.0이고 현재는 2.0.2입니다. 최신 버전은 12 열 그리드로, 2,3,4 및 6 개의 동일한 열을 가질 수 있습니다. 많은 것을 변경하지 않고도 5 개의 동일한 열을 가질 수 있습니다.
— 간달프
가능하지만 일부 그리드 요소와 반응 형 그리드 요소를 크게 수정해야합니다. 귀하의 사이트는 반응이 좋습니까? 그런 식으로 대답을하는 것이 조금 더 쉬울 것입니다. 그렇지 않으면 많은 코드가 될 것입니다.
— Andres Ilich
예, 사이트는 반응이 좋지만 반응 형 부분뿐만 아니라 그리드 요소도 수정해야합니다.
— 간달프
1
.container.one-fifth.column {width : 17 %; } 숨을 쉴만한 멋진 무언가를 기대하고 있지만 17.87847 %.
— 간달프

답변:

406

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>
— jkofron.e
소스
44
전체 너비로 진행되지 않습니다. 그것은 멋지다
— machineaddict
45
내가 게시 한 솔루션은 전체 너비로 이동하여 5 개의 동일한 열을 생성 합니다. 여기는 답변 입니다.
— Fizzix
5
@fizzix가 아래에 제공하는 답변과 같이 전체 너비로 가지 않습니다. 양쪽에 원치 않는 여백을 만든다 같은 - jsfiddle.net/wdo8L1ww
— Fizzix
3
이 솔루션에서는 열이 다소 작게 보이므로 @fizzix 솔루션을 선호합니다
— dc2009
2
Bootstrap 4 5 cols (전폭)에는 CSS 또는 SASS가 필요하지 않습니다 : stackoverflow.com/a/42226652/171456
— Zim
526

부트 스트랩 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>

작업 데모

— 피지 스
소스
1
전화하면 col-*-15혼란 스러울 수 있습니다. 그것은 그들이 15 열 그리드 시스템의 일부임을 암시하는 것 같습니다.
— Paul D. Waite
2
@ PaulD.Waite-사람들에게 알리기 위해 답변에 약간의 메모를 추가했습니다.
— Fizzix
2
col-*-15나에게는 괜찮지 만 col-*-5ths약간 덜 혼란스러운 열 이름 일 수 있습니다. 다른 개발자가 혼란스러워하지 않도록 내가 사용하는 것입니다.
— Mordred
3
Hes @scragar-모든 Bootstrap의 현재 열 클래스의 스타일을 보면 모두 클래스가 포함되어 있음을 알 수 있습니다 position:relative; min-height: 1px; padding-right: 15px; padding-left: 15px;. 기본적으로 내가 게시 한 코드는 Bootstrap의 내장 스타일과 정확히 일치하도록 확장되었습니다. 그런 다음 너비를 적용하여 20%5 개의 동일한 열이 페이지에 맞도록 할 수 있습니다. 매우 간단한 :)
— Fizzix
1
2/5 열의 이름은 어떻습니까? 또는 우리는 사용해야합니다 : 1/5의 경우 col-md-1ths, 2/5의 경우 col-md-2ths, 5/5의 col-md-5ths = 전체 너비?
— Alex
166

들어 부트 스트랩 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 개의 열 레이아웃이 추가되므로 타사 도구 나 기존 스타일이 손상되지 않습니다.

— 조명 스위치
소스
5
2.412의 5 ( 2.4*5=12) 와 같이 가장 깨끗한 솔루션 은 12 열 그리드의 부트 스트랩 3에서 작동합니다. 또한 적용 make-xs, make-sm있지만 (최신 GET 우선 순위) 다른 표준 COL 정의와 함께 작동하지 않습니다
— Sherbrow
6
이 답변에 대해 비교적 소수의 공감대에 충격을 받았습니다. 다른 Bootstrap 열 클래스와 동일한 명명 규칙뿐만 아니라 Bootstrap이 자체 열을 만드는 데 사용하는 동일한 믹스 인을 사용하여 해킹이 가장 적습니다.
— 크리스 프리츠
3
이것이 가장 좋은 대답입니다. 나는 라이브러리를 생성 (포함하는 한 offset, pull그리고 push내 자신의 사용을 위해이에)를 기반으로. 자유롭게 확인하십시오
— Kenny Ki
1
모두가 말했듯이, 이제 이것이 정답입니다. @Sherbrow는 "다른 표준 열 정의와 결합하여 작동하지 않을 것"이라고 말했지만이 방법은 어떤 방식 으로든 잘못된 것이 아니기 때문에 단순히 12 % 5! = 0이기 때문입니다.
— Nick M
2
@ lightswitch05 불행히도 동적 인 열이 있기 때문에 나에게 적합하지 않았습니다. 열이 하나만 있으면 화면의 5 번째가 되길 원했지만 Fizzix의 답변을 사용하면 단일 열이 전체 화면을 덮을 수 있습니다. 새로운 Bootstrap 4 믹스 인 기능을 사용하여 문제를 해결했습니다. 원하는 경우 답변을 업데이트하여 포함시킬 수 있습니까?
— PLOG
40

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 열 레이아웃

— 짐
소스
2
그것이 안정 될 때까지 기다릴 수 없습니다 :)
— nicolallias
2
양호하지만 5 개 요소의 행에서만 작동합니다. 더 많이 얻는다면 당신은 잘못입니다. 내 enhenced 바이올린을 여기에서보십시오 : jsfiddle.net/djibe89/ntq8h910
— djibe
그렇기 때문에 5 열마다 나누기를 사용해야한다고 설명했습니다. 귀하의 솔루션은 작동하지만 추가 CSS가 필요합니다.
— Zim
또한 (자동) 열이 부모 너비를 초과 할 수 있으므로 추가 flex-nowrap를 고려 .row하십시오.
— Luuk Skeur
31

아래는 @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%;
    }
}
— 격자 무늬의
소스
이것을 어디에 배치하고 어떻게 사용합니까?
— sergserg
1
@Serg 1. 아래에 / 부트 스트랩 CSS 파일이 셀에만에 .fivecolumns 클래스를 추가합니다 후, 다음 클래스 .COL 둥지 다섯 개의 열 [- SM, -LG] -2
— plaidcorp
어떤 경우에는 완벽한 너비로 가지 않습니다.
— Fizzix
col-xs-2가 왜 선언에 추가되지 않습니까?
— ganders
@ganders 그냥 지나쳐; 이 페이지에서 다른 답변을 확인하십시오 : stackoverflow.com/questions/10387740/…
— plaidcorp
27

원래 부트 스트랩을 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/ 에서 찾을 수 있습니다.

— 기계 중독자
소스
10

정확히 같은 너비의 열이 필요하지 않은 경우 중첩을 사용하여 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 변경이 필요하지 않습니다 (기본 부트 스트랩 클래스 만 사용함).

— DraggonZ
소스
9

5 열 레이아웃을위한 사용자 정의 부트 스트랩 다운로드 작성

로 이동 부트 스트랩 2.3.2 (또는 부트 스트랩 3 ) 사용자 정의 페이지를 설정하고 다음과 같은 변수 (입력하지 세미콜론을) :

@gridColumns:           5;
@gridColumnWidth:       172px;
@gridColumnWidth1200:   210px;
@gridColumnWidth768:    128px;
@gridGutterWidth768:    21px;

빌드를 다운로드하십시오. 이 그리드는 기본 거터 너비 (거의)를 유지하면서 기본 컨테이너에 맞습니다.

참고 : LESS를 사용하는 경우 variables.less대신 업데이트하십시오 .

— 파블로
소스
7

flexbox로 http://output.jsbin.com/juziwu

.flexrow {
  display: flex;
  background: lightgray; /*for debug*/
}
.flexrow > * {
  flex: 1;
  margin: 1em;
  outline: auto green;
}
<div class="flexrow">
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...<br>..</div>
  <div>...</div>
</div>
스 니펫 확장

— caub
소스
flexbox는 필요에 따라 부트 스트랩보다 낫습니다.
— ml242 dec
6

나는 Mafnah의 답변에 투표했지만 이것을 다시 보면 기본 마진 등을 유지하는 경우 다음이 더 좋습니다.

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

.equal .span2 {
    width: 17.9%;
}
— Studio4
소스
1
실제 너비는 17.94872 % 이며 응답하지 않으므로 모든 @media 쿼리에서 각 열에 대해 새 마진을 설정해야합니다.
— machineaddict
5 
<div class="equal row-fluid">
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
</div>

.equal .span2 {
    width: 20%;
}
— 마프 나
소스
1
.span2와 같아야합니다. {너비 : 20 %; }
— Studio4
... 작동하지 않습니다. 첫 번째 열을 제외한 각 열에는 여백이 있습니다.
— machineaddict
5

col-sm-2 클래스로 5 개의 요소를 만들고 첫 번째 요소에 col-sm-offset-1 클래스를 추가하십시오.

추신 : 이것은 전폭이 아닙니다 (화면의 오른쪽과 왼쪽에서 약간 들여 쓰기됩니다)

코드는 다음과 같아야합니다 

<div class="col-sm-2 col-sm-offset-1"></div>
<div class="col-sm-2"></div>
<div class="col-sm-2"></div>
<div class="col-sm-2"></div>
<div class="col-sm-2"></div>
— agDev
소스
5

부트 스트랩 4, 행당 가변 열 수

행당 최대 5 개의 열 을 가지 려면 더 적은 수의 열이 여전히 각 행의 1/5 만 차지하도록하려면 Bootstrap 4의 믹스 인 을 사용하는 것이 좋습니다 .

SCSS :

.col-2-4 {
    @include make-col-ready(); // apply standard column margins, padding, etc.
    @include make-col(2.4); // 12/5 = 2.4
}
.col-sm-2-4 {
    @include make-col-ready();
    @include media-breakpoint-up(sm) {
        @include make-col(2.4);
    }
}
.col-md-2-4 {
    @include make-col-ready();
    @include media-breakpoint-up(md) {
        @include make-col(2.4);
    }
}
.col-lg-2-4 {
    @include make-col-ready();
    @include media-breakpoint-up(lg) {
        @include make-col(2.4);
    }
}
.col-xl-2-4 {
    @include make-col-ready();
    @include media-breakpoint-up(xl) {
        @include make-col(2.4);
    }
}

HTML :

<div class="container">    
  <div class="row">
    <div class="col-12 col-sm-2-4">1 of 5</div>
    <div class="col-12 col-sm-2-4">2 of 5</div>
    <div class="col-12 col-sm-2-4">3 of 5</div>
    <div class="col-12 col-sm-2-4">4 of 5</div>
    <div class="col-12 col-sm-2-4">5 of 5</div>
  </div>
  <div class="row">
    <div class="col-12 col-sm-2-4">1 of 2</div> <!-- same width as column "1 of 5" above -->
    <div class="col-12 col-sm-2-4">2 of 2</div> <!-- same width as column "2 of 5" above -->
  </div>
</div>
— daGUY
소스
4

Bootstrap 3에서 5 개의 열을 활성화하는 다른 방법은 Bootstrap에서 기본적으로 사용되는 12 개의 열 형식을 수정하는 것입니다. 그런 다음 20 열 그리드를 만듭니다 (Bootstrap 웹 사이트에서 사용자 정의 사용 또는 LESS / SASS 버전 사용).

부트 스트랩 웹 사이트에서 사용자 정의하려면 사용자 정의 및 다운로드 페이지 로 이동하여 변수를 @grid-columns에서 12로 업데이트하십시오 20. 그런 다음 4 개 열과 5 개 열을 만들 수 있습니다.

— 닙슨
소스
3

중첩 및 약간의 CSS 오버라이드를 사용하여 수행 할 수 있습니다.

<div class="col-sm-12">
<div class="row">
  <div class="col-sm-7 five-three">
    <div class="row">
      <div class="col-sm-4">
      Column 1
      </div>
      <div class="col-sm-4">
      Column 2
      </div>
      <div class="col-sm-4">
      Column 3
      </div><!-- end inner row -->
    </div>
  </div>
  <div class="col-sm-5 five-two">
    <div class="row">
      <div class="col-sm-6">
        Col 4
      </div>
      <div class="col-sm-6">
      Col 5
      </div>
    </div><!-- end inner row -->
  </div>
</div>​<!-- end outer row -->

그런 다음 일부 CSS

@media  (min-width: 768px) {
div.col-sm-7.five-three {
width: 60% !important;
}

div.col-sm-5.five-two {
width: 40% !important;
}

}

예는 다음과 같습니다. 5 개의 동일한 열 예

그리고 여기에 코더 월에 대한 전체 글이 있습니다.

부트 스트랩 3의 5 개의 동일한 열

— 브래리스
소스
3

제 생각에는 Less 구문으로 이와 같이 사용하는 것이 좋습니다. 이 답변은 @fizzix 의 답변 을 기반으로합니다.

이런 식으로 열은 사용자가 재정의했을 수있는 변수 (@ grid-gutter-width, media breakpoints)를 사용하며 5 개 열의 동작은 12 개 열 그리드의 동작과 일치합니다.

/*
 * Special grid for ten columns, 
 * using its own scope 
 * so it does not interfere with the rest of the code
 */

& {
    @import (multiple) "../bootstrap-3.2.0/less/variables.less";
    @grid-columns: 5;
    @import  (multiple) "../bootstrap-3.2.0/less/mixins.less";

    @column: 1;
    .col-xs-5ths {
        .make-xs-column(@column);
    }

    .col-sm-5ths {
        .make-sm-column(@column);
    }

    .col-md-5ths {
        .make-md-column(@column);
    }

    .col-lg-5ths {
        .make-lg-column(@column);
    }
}

/***************************************/
/* Using default bootstrap now
/***************************************/

@import  (multiple) "../bootstrap-3.2.0/less/variables.less";
@import  (multiple) "../bootstrap-3.2.0/less/mixins.less";

/* ... your normal less definitions */
— 체외
소스
3

기본적으로 Bootstrap은 5 개의 열 레이아웃을 생성 할 수있는 그리드 시스템을 제공하지 않으므로 Bootstrap이 CSS 파일에서 일부 사용자 정의 클래스 및 미디어 쿼리를 생성하는 방식으로 기본 열 정의를 생성해야합니다.

.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}
.col-xs-15 {
    width: 20%;
    float: left;
}
@media (min-width: 768px) {
.col-sm-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-15 {
        width: 20%;
        float: left;
    }
}

그리고 일부 HTML 코드

<div class="row">
    <div class="col-md-15 col-sm-3">
    ...
    </div>
</div>
— 바이트
소스
3

기본적으로 부트 스트랩은 12 열까지 확장 할 수 있습니까? 즉, 동일한 너비의 12 열 레이아웃을 만들려면 div class = "col-md-1"안에 12 번 작성합니다.

<div class="row">
<div class="col-md-1"></div>    
<div class="col-md-2">1</div>
<div class="col-md-2">2</div>
<div class="col-md-2">3</div>
<div class="col-md-2">4</div>
<div class="col-md-2">5</div>
<div class="col-md-1"></div>
</div>
— 매니쉬 베르 마
소스
3

Twitter 부트 스트랩 스타일의 5 열 레이아웃

.col-xs-15 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

.col-xs-15 {
    width: 100%;
    float: left;
}
@media (min-width: 768px) {
.col-xs-15 {
        width: 50%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-xs-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-xs-15 {
        width: 20%;
        float: left;
    }
}
— 산지 브 데브 나트
소스
3

많은 CSS를 필요로하지 않거나 부트 스트랩 기본 12col 레이아웃을 조정하지 않는 솔루션 :

http://jsfiddle.net/0ufdyeur/1/

HTML :

<div class="stretch">
  <div class="col-lg-2"></div>
  <div class="col-lg-2"></div>
  <div class="col-lg-2"></div>
  <div class="col-lg-2"></div>
  <div class="col-lg-2"></div>
</div>

CSS :

@media (min-width: 1200px) { /*if not lg, change this criteria*/
  .stretch{
    width: 120%; /*the actual trick*/
  }
}
— 니콜라 리아
소스
3

새 클래스를 만들고 필요에 따라 각 미디어 쿼리마다 동작을 정의하십시오.

@media(min-width: 768px){
  .col-1-5{
    width: 20%;
    float: left;
    position: relative;
    min-height: 1px;
    padding-right: 5px;
    padding-left: 5px;
  }
}

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

다음은 실제 데모입니다. https://codepen.io/giorgosk/pen/BRVorW

— 조르고 스
소스
2

부트 스트랩 3에서는 왼쪽과 오른쪽 여백을 제거하기 위해 이와 같은 작업을 수행 할 수 있다고 생각합니다.

<div class="row this_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>

CSS

.this_row {
    margin: 0 -5%;
}
— 구 아프
소스
2

부트 스트랩에 5 개의 열 그리드를 추가하는 방법

.col-lg-1-5,.col-md-1-5,.col-sm-1-5,.col-xs-1-5{min-height:1px;padding-left:15px;padding-right:15px;position:relative; width:100%;box-sizing:border-box;}
.item{width:100%;height:100px; background-color:#cfcfcf;}
.col-xs-1-5{width: 20%;float:left;} }

@media (min-width: 767px){ .col-sm-1-5{width: 20%;float:left;} }
@media (min-width: 992px){ .col-md-1-5{width: 20%;float:left;} }
@media (min-width: 1200px){ .col-lg-1-5{width: 20%;float:left;} }
<div class="row">
  <div class="col-sm-1-5">
    <div class="item">Item 1</div>
  </div>
  <div class="col-sm-1-5">
    <div class="item">Item 2</div>
  </div>
  <div class="col-sm-1-5">
    <div class="item">Item 3</div>
  </div>
  <div class="col-sm-1-5">
    <div class="item">Item 4</div>
  </div>
  <div class="col-sm-1-5">
    <div class="item">Item 5</div>
  </div>
</div>
스 니펫 확장

— 로빈 드 쿠마르
소스
2

CSS를 편집 할 필요가없는 가장 쉬운 해결책은 다음과 같습니다.

<div class="row">
  <div class="btn-group btn-group-justified">
    <div class="btn-group">
      <div class="col-sm-12">Column 1</div>
    </div>
    <div class="btn-group">
      <div class="col-sm-12">Column 2</div>
    </div>
    <div class="btn-group">
      <div class="col-sm-12">Column 3</div>
    </div>
    <div class="btn-group">
      <div class="col-sm-12">Column 4</div>
    </div>
    <div class="btn-group">
      <div class="col-sm-12">Column 5</div>
    </div>
  </div>
</div>

중단 점을 뛰어 넘어야하는 경우 btn-group 블록을 만드십시오. 이것이 누군가를 돕기를 바랍니다.

— 비 카스 바루
소스
2

5 개의 열은 설계 상 부트 스트랩의 일부가 아닙니다.

그러나 Bootstrap v4 (알파)를 사용하면 복잡한 그리드 레이아웃에 도움이되는 두 가지가 있습니다.

  1. 새로운 요소 유형 인 Flex ( http://v4-alpha.getbootstrap.com/getting-started/flexbox/ ) (공식-https: //www.w3.org/TR/css-flexbox-1/ )
  2. 반응 형 유틸리티 ( http://v4-alpha.getbootstrap.com/layout/responsive-utilities/ )

간단히 말해서, 나는

<style>
.flexc { display: flex; align-items: center; padding: 0; justify-content: center; }
.flexc a { display: block; flex: auto; text-align: center; flex-basis: 0; }
</style>
<div class="container flexc hidden-sm-down">
  <!-- content to show in MD and larger viewport -->
  <a href="#">Link/Col 1</a>
  <a href="#">Link/Col 2</a>
  <a href="#">Link/Col 3</a>
  <a href="#">Link/Col 4</a>
  <a href="#">Link/Col 5</a>
</div>
<div class="container hidden-md-up">
  <!-- content to show in SM and smaller viewport, I don't think 5 cols in smaller viewport are gonna be alright :) -->
</div>

5,7,9,11,13 또는 다른 확률이 있으면 괜찮을 것입니다. 12 그리드 표준이 유스 케이스의 90 % 이상을 제공 할 수 있다고 확신합니다. 따라서 디자인하십시오-더 쉽게 개발하십시오!

멋진 플렉스 튜토리얼은 " https://css-tricks.com/snippets/css/a-guide-to-flexbox/ "

— 고나 테
소스
2

여러 열에 대한 부트 스트랩 정의를 기반으로 SASS 믹스 인 정의를 작성했습니다 (개인적으로 12, 8, 10 및 24를 사용함).

// Extended bootstrap grid system
//
// Framework grid generation
//
// Based on Bootstrap 'bootstrap/_grid-framework.scss'. Generates classes in form of `.col-(size)-x-num` of width x/num.

@mixin make-extended-grid-columns($num-columns, $i: 1, $list: ".col-xs-#{$i}-#{$num-columns}, .col-sm-#{$i}-#{$num-columns}, .col-md-#{$i}-#{$num-columns}, .col-lg-#{$i}-#{$num-columns}") {
    @for $i from (1 + 1) through $num-columns {
        $list: "#{$list}, .col-xs-#{$i}-#{$num-columns}, .col-sm-#{$i}-#{$num-columns}, .col-md-#{$i}-#{$num-columns}, .col-lg-#{$i}-#{$num-columns}";
    }
    #{$list} {
        position: relative;
        min-height: 1px;
        padding-left:  ($grid-gutter-width / 2);
        padding-right: ($grid-gutter-width / 2);
    }
}


@mixin float-extended-grid-columns($class, $num-columns, $i: 1, $list: ".col-#{$class}-#{$i}-#{$num-columns}") {
    @for $i from (1 + 1) through $num-columns {
        $list: "#{$list}, .col-#{$class}-#{$i}-#{$num-columns}";
    }
    #{$list} {
        float: left;
    }
}


@mixin calc-extended-grid-column($index, $num-columns, $class, $type) {
    @if ($type == width) and ($index > 0) {
        .col-#{$class}-#{$index}-#{$num-columns} {
            width: percentage(($index / $num-columns));
        }
    }
    @if ($type == push) and ($index > 0) {
        .col-#{$class}-push-#{$index}-#{$num-columns} {
            left: percentage(($index / $num-columns));
        }
    }
    @if ($type == pull) and ($index > 0) {
        .col-#{$class}-pull-#{$index}-#{$num-columns} {
            right: percentage(($index / $num-columns));
        }
    }
    @if ($type == offset) and ($index > 0) {
        .col-#{$class}-offset-#{$index}-#{$num-columns} {
            margin-left: percentage(($index / $num-columns));
        }
    }
}

@mixin loop-extended-grid-columns($num-columns, $class, $type) {
    @for $i from 1 through $num-columns - 1 {
        @include calc-extended-grid-column($i, $num-columns, $class, $type);
    }
}

@mixin make-extended-grid($class, $num-columns) {
    @include float-extended-grid-columns($class, $num-columns);
    @include loop-extended-grid-columns($num-columns, $class, width);
    @include loop-extended-grid-columns($num-columns, $class, pull);
    @include loop-extended-grid-columns($num-columns, $class, push);
    @include loop-extended-grid-columns($num-columns, $class, offset);
}

그리고 다음과 같이 간단하게 클래스를 만들 수 있습니다.

$possible-number-extended-grid-columns: 8, 10, 24;

@each $num-columns in $possible-number-extended-grid-columns {

  // Columns

  @include make-extended-grid-columns($num-columns);

  // Extra small grid

  @include make-extended-grid(xs, $num-columns);

  // Small grid

  @media (min-width: $screen-sm-min) {
    @include make-extended-grid(sm, $num-columns);
  }

  // Medium grid

  @media (min-width: $screen-md-min) {
    @include make-extended-grid(md, $num-columns);
  }

  // Large grid

  @media (min-width: $screen-lg-min) {
    @include make-extended-grid(lg, $num-columns);
  }

}

누군가가 유용하다고 생각하기를 바랍니다.

— 눌렌
소스
2

누군가 부트 스트랩-ass (v3)를 사용하고 있습니까? 여기서는 부트 스트랩 혼합을 사용하는 5 열에 대한 간단한 코드입니다.

  .col-xs-5ths {
     @include make-xs-column(2.4);
  }

  @media (min-width: $screen-sm-min) {
     .col-sm-5ths {
        @include make-sm-column(2.4);
     }
  }

  @media (min-width: $screen-md-min) {
     .col-md-5ths {
        @include make-md-column(2.4);
     }
  }

  @media (min-width: $screen-lg-min) {
     .col-lg-5ths {
        @include make-lg-column(2.4);
     }
  }

포함했는지 확인하십시오 :

@import "bootstrap/variables";
@import "bootstrap/mixins";
— 베드 맨
소스
1
덕분에,이 내가 만든, 내가 찾던이었다 1-5ths 2-5ths 등 심지어 3-10ths 등 지금 너무, 유연성, 매우 편리해야합니다
— morksinaanab
2

부트 스트랩 4.4 이상

새로운 row-cols-n클래스를 사용하십시오 .

  1. div에 row-cols-5수업을 추가 하십시오 .row. 사용자 정의 CSS가 필요하지 않습니다.
  2. row-cols에 대해서는 4.4 문서를 참조하십시오 : https://getbootstrap.com/docs/4.4/layout/grid/#row-columns

Bootstrap 4.4 이전의 Bootstrap 4 버전

  1. 아래의 CSS를 복사하고 (부트 스트랩 작성자의 멋진 CSS) 프로젝트에 추가하십시오.

  2. 위에 인용 된 문서를 읽고 올바르게 사용하십시오.

    .row-cols-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}@media (min-width:576px){.row-cols-sm-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-sm-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-sm-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-sm-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-sm-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-sm-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}}@media (min-width:768px){.row-cols-md-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-md-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-md-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-md-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-md-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-md-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}}@media (min-width:992px){.row-cols-lg-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-lg-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-lg-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-lg-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-lg-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-lg-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}}@media (min-width:1200px){.row-cols-xl-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-xl-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-xl-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-xl-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-xl-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-xl-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}}

— 지베
소스
1 

.col-xs-2-4 {
  position: relative;
  float: left;
  width: 20%;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
.col-sm-2-4 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 768px) {
  .col-sm-2-4 {
    float: left;
    width: 20%;
  }
}
.col-md-2-4 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 992px) {
  .col-md-2-4 {
    float: left;
    width: 20%;
  }
}
.col-lg-2-4 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 1200px) {
  .col-lg-2-4 {
    float: left;
    width: 20%;
  }
}
스 니펫 확장

— 아루
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.