Tôi muốn có 5 cột bằng nhau trên một trang tôi đang xây dựng và dường như tôi không thể hiểu làm thế nào lưới 5 cột đang được sử dụng ở đây: http://web.archive.org/web/20120416024539/http://domain7 .com / mobile / tools / bootstrap / responsive

Là lưới năm cột được thể hiện trên một phần của khung bootstrap twitter?

Sử dụng năm div với một lớp span2 và cung cấp cho lớp đầu tiên là 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>

Voila! Năm cột cách đều nhau và trung tâm.

Trong bootstrap 3.0, mã này sẽ trông giống như

<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>

Dành cho Bootstrap 3 trở lên

Bố cục 5 cột có chiều rộng đầy đủ tuyệt vời với Twitter Bootstrap đã được tạo ở đây .

Đây là giải pháp tiên tiến nhất vì nó hoạt động trơn tru với Bootstrap 3. Nó cho phép bạn sử dụng lại các lớp nhiều lần, kết hợp với các lớp Bootstrap hiện tại để thiết kế đáp ứng.

CSS:
Thêm phần này vào biểu định kiểu toàn cầu của bạn hoặc thậm chí vào cuối bootstrap.csstài liệu của bạn .

.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;
    }
}

Đặt nó để sử dụng!
Ví dụ: nếu bạn muốn tạo một phần tử div hoạt động giống như bố cục năm cột trên màn hình trung bình và giống như hai cột trên các cột nhỏ hơn, bạn chỉ cần sử dụng một cái gì đó như thế này:

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

DEMO LÀM VIỆC - Mở rộng khung để xem các cột trở nên nhạy.

KHÁC DEMO - Kết hợp cáccol-*-5thslớpmớivới những người khác nhưcol-*-3vàcol-*-2. Thay đổi kích thước khung hình để xem tất cả chúng thay đổi thànhcol-xs-6trong chế độ xem đáp ứng.

Dành cho Bootstrap 4

Bootstrap 4 hiện sử dụng flexbox theo mặc định, vì vậy bạn có thể truy cập vào sức mạnh ma thuật của nó ngay lập tức. Kiểm tra các cột bố trí tự động điều chỉnh độ rộng động tùy thuộc vào số lượng cột được lồng.

Đây là một ví dụ:

<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>

DEMO LÀM VIỆC

Đối với Bootstrap 3 , nếu bạn muốn toàn chiều rộng và đang sử dụng LESS, SASShoặc một cái gì đó tương tự, tất cả các bạn phải làm là làm cho sử dụng các chức năng mixin Bootstrap của make-md-column , make-sm-columnvv

ÍT HƠN:

.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)
}

Không chỉ bạn có thể xây dựng các lớp học cột bootstrap toàn chiều rộng đúng bằng những mixins, nhưng bạn cũng có thể xây dựng tất cả các lớp helper liên quan như .col-md-push-*, .col-md-pull-*và .col-md-offset-*:

ÍT HƠN:

.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)
}

Các câu trả lời khác nói về cài đặt @gridColumnshoàn toàn hợp lệ, nhưng điều đó thay đổi độ rộng cột lõi cho tất cả bootstrap. Sử dụng các hàm mixin ở trên sẽ thêm bố cục 5 cột lên trên các cột bootstrap mặc định, do đó, nó sẽ không phá vỡ bất kỳ công cụ của bên thứ 3 hoặc kiểu dáng hiện có nào.

Cập nhật 2019

Bootstrap 4.1+

Dưới đây là 5 cột có độ rộng đầy đủ bằng nhau ( không có CSS ​​hoặc SASS bổ sung ) bằng cách sử dụng lưới bố cục tự động :

<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

Giải pháp này hoạt động vì Bootstrap 4 hiện là flexbox. Bạn có thể lấy 5 cột để bọc trong cùng một .rowcách sử dụng dấu ngắt <div class="col-12"></div>, hoặc <div class="w-100"></div>cứ sau 5 cột.

Xem thêm: Bootstrap - Bố cục 5 cột

Dưới đây là kết hợp các câu trả lời @machineaddict và @Mafnah, được viết lại cho Bootstrap 3 (hoạt động tốt cho tôi cho đến nay):

@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%;
    }
}

Giữ bootstrap ban đầu với 12 cột, không tùy chỉnh nó. Sửa đổi duy nhất bạn cần thực hiện là một số css sau css phản hồi bootstrap ban đầu, như thế này:

Đoạn mã sau đã được thử nghiệm cho 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>

Và 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>

Lưu ý: Mặc dù span2 lần 5 không bằng 12 cột, bạn vẫn có ý tưởng :)

Một ví dụ hoạt động có thể được tìm thấy ở đây http://jsfiddle.net/v3Uy5/6/

Trong trường hợp bạn không cần chính xác chiều rộng của các cột, bạn có thể thử tạo 5 cột bằng cách sử dụng lồng nhau:

<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

Hai cột đầu tiên sẽ có chiều rộng bằng 5/12 * 1/2 ~ 20,83%

Ba cột cuối cùng: 7/12 * 1/3 ~ 19,44%

Việc hack như vậy mang lại kết quả chấp nhận được trong nhiều trường hợp và không yêu cầu bất kỳ thay đổi CSS nào (chúng tôi chỉ sử dụng các lớp bootstrap riêng).

Tạo tải xuống Bootstrap tùy chỉnh cho bố cục 5 cột

Chuyển đến trang tùy chỉnh Bootstrap 2.3.2 (hoặc Bootstrap 3 ) và đặt các biến sau (không nhập dấu chấm phẩy):

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

Tải về bản dựng của bạn. Lưới này sẽ phù hợp với các thùng chứa mặc định, duy trì độ rộng máng mặc định (gần như).

Lưu ý: Nếu bạn đang sử dụng LESS, hãy cập nhật variables.lessthay thế.

Với flexbox http://output.jsbin.com/juzulum

.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>

Tôi đã bỏ phiếu cho câu trả lời của Mafnah nhưng nhìn lại lần này tôi đề nghị những điều sau sẽ tốt hơn nếu bạn giữ mức lợi nhuận mặc định, v.v.

<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%;
}

<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%;
}

Tạo 5 phần tử với lớp col-sm-2 và thêm vào phần tử đầu tiên cũng là lớp col-sm-offset-1

Ps này sẽ không đầy đủ chiều rộng (nó sẽ được thụt vào một chút từ bên phải và bên trái của màn hình)

Mã sẽ trông giống như thế này

<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>

Bootstrap 4, số lượng cột thay đổi trên mỗi hàng

Nếu bạn muốn có tối đa năm cột trên mỗi hàng, do đó số lượng cột ít hơn vẫn chỉ chiếm 1/5 mỗi hàng, giải pháp là sử dụng mixins của 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>

Một cách khác để kích hoạt 5 cột trong Bootstrap 3 là sửa đổi định dạng 12 cột theo mặc định của Bootstrap. Và sau đó tạo lưới 20 cột (sử dụng tùy chỉnh trên trang web Bootstrap HOẶC sử dụng phiên bản LESS / SASS).

Để tùy chỉnh trên trang web bootstrap, hãy truy cập trang Tùy chỉnh và Tải xuống , cập nhật biến @grid-columnstừ 12sang 20. Sau đó, bạn sẽ có thể tạo 4 cũng như 5 cột.

Nó có thể được thực hiện với việc làm tổ và sử dụng một chút css quá mức.

<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 -->

Sau đó, một số css

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

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

}

Dưới đây là một ví dụ: 5 ví dụ cột bằng nhau

Và đây là toàn bộ bài viết của tôi trên coderwall

Năm cột bằng nhau trong bootstrap 3

Theo tôi, tốt hơn là sử dụng nó như thế này với cú pháp Ít hơn. Câu trả lời này dựa trên câu trả lời từ @fizzix

Cách cột này sử dụng các biến (@ lưới-máng xối, điểm dừng phương tiện) mà người dùng có thể đã ghi đè và hành vi của năm cột khớp với hành vi của lưới 12 cột.

/*
 * 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 */

Điều này thật tuyệt vời: http://www.ianmccullough.net/5-column-bootstrap-layout/

Cứ làm đi:

<div class="col-xs-2 col-xs-15">

Và CSS:

.col-xs-15{
    width:20%;
}

Theo mặc định, Bootstrap không cung cấp hệ thống lưới cho phép chúng tôi tạo bố cục năm cột, bạn cần tạo định nghĩa cột mặc định theo cách mà Bootstrap tạo một số lớp tùy chỉnh và truy vấn phương tiện trong tệp css của bạn

.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;
    }
}

và một số mã html

<div class="row">
    <div class="col-md-15 col-sm-3">
    ...
    </div>
</div>

Bootstrap theo mặc định có thể mở rộng tối đa 12 cột? Điều này có nghĩa là nếu chúng ta muốn tạo bố cục 12 cột có chiều rộng bằng nhau, chúng ta sẽ viết bên trong div class = "col-md-1" mười hai lần.

<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>

Bố cục 5 cột với phong cách Twitter Bootstrap

.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;
    }
}

Một giải pháp không yêu cầu nhiều CSS, cũng không điều chỉnh bố cục 12col mặc định của bootstrap:

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*/
  }
}

Chỉ cần tạo một lớp mới và xác định hành vi của nó cho mỗi truy vấn phương tiện nếu cần

@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>

đây là bản demo hoạt động https://codepen.io/giorgosk/pen/BRVorW

Trong bootstrap 3, tôi nghĩ rằng chúng ta có thể làm một cái gì đó như thế, để loại bỏ lề trái và phải:

<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>

và CSS

.this_row {
    margin: 0 -5%;
}

Cách bạn có thể thêm lưới 5 cột trong bootstrap

.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>

giải pháp đơn giản nhất mà không cần chỉnh sửa CSS sẽ là:

<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>

Và nếu bạn cần những thứ đó để vượt ra khỏi bất kỳ điểm dừng nào, chỉ cần tạo khối btn-nhóm. Hy vọng điều này sẽ giúp được ai đó.

Năm cột rõ ràng không phải là một phần của bootstrap theo thiết kế.

Nhưng với Bootstrap v4 (alpha), có 2 điều giúp với bố cục lưới phức tạp

1. Flex ( http://v4-alpha.getbootstrap.com/getting-started/flexbox/ ), loại phần tử mới (chính thức - https://www.w3.org/TR/css-flexbox-1/ )
2. Các tiện ích đáp ứng ( http://v4-alpha.getbootstrap.com/layout/responsive-utilities/ )

Nói một cách đơn giản, tôi đang sử dụng

<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>

Có thể là 5,7,9,11,13 hoặc tỷ lệ cược nào đó, nó sẽ ổn thôi. Tôi khá chắc chắn rằng tiêu chuẩn 12 lưới có thể phục vụ hơn 90% trường hợp sử dụng - vì vậy hãy thiết kế theo cách đó - cũng phát triển dễ dàng hơn!

Hướng dẫn flex tuyệt vời có tại đây " https://css-tricks.com/snippets/css/a-guide-to-flexbox/ "

Tôi đã tạo các định nghĩa mixin SASS dựa trên các định nghĩa bootstrap cho bất kỳ số lượng cột nào (cá nhân bên cạnh 12 tôi sử dụng 8, 10 và 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);
}

Và bạn chỉ có thể tạo các lớp bằng cách:

$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);
  }

}

Tôi hy vọng ai đó sẽ thấy nó hữu ích

Có ai đó sử dụng bootstrap-sass (v3) không, đây là mã đơn giản cho 5 cột sử dụng hỗn hợp bootstrap:

  .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);
     }
  }

Hãy chắc chắn rằng bạn đã bao gồm:

@import "bootstrap/variables";
@import "bootstrap/mixins";

Dành cho Bootstrap 4.4+

Sử dụng các row-cols-nlớp hoàn toàn mới .

1. Thêm row-cols-5lớp vào .rowdiv của bạn . Không cần CSS tùy chỉnh.
2. Xem tài liệu 4.4 tại đây để xem hàng: https://getbootstrap.com/docs/4.4/layout/grid/#row-columns

Đối với phiên bản Bootstrap 4 trước Bootstrap 4.4

1. Sao chép CSS bên dưới (CSS tuyệt vời của các tác giả Bootstrap) và thêm nó vào dự án của bạn

2. Đọc các tài liệu được trích dẫn ở trên để sử dụng nó một cách chính xác.

   .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%}}