ฉันต้องการมี 5 คอลัมน์เท่ากันในหน้าฉันกำลังสร้างและฉันไม่สามารถเข้าใจได้ว่ามีการใช้กริด 5 คอลัมน์ที่นี่ได้อย่างไร: http://web.archive.org/web/20120416024539/http://domain7 เครื่องมือ .com / / มือถือ / บูต / ตอบสนอง

ตารางห้าคอลัมน์ถูกแสดงไว้เหนือส่วนหนึ่งของเฟรมเวิร์ก bootstrap twitter หรือไม่?

ใช้ห้า divs กับคลาสของ span2 และให้คลาสของ 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! ห้าคอลัมน์ที่เว้นระยะเท่ากันและอยู่กึ่งกลาง

ใน bootstrap 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>

สำหรับ Bootstrap 3 ขึ้นไป

มหัศจรรย์เต็มความกว้าง 5 คอลัมน์รูปแบบด้วย Twitter Bootstrap ถูกสร้างขึ้นที่นี่

นี่เป็นโซลูชันที่ล้ำหน้าที่สุดเนื่องจากทำงานได้อย่างราบรื่นกับ 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;
    }
}

นำไปใช้!
ตัวอย่างเช่นหากคุณต้องการสร้างองค์ประกอบ div ที่ทำงานเหมือนเค้าโครงคอลัมน์ห้าคอลัมน์บนหน้าจอขนาดกลางและเช่นเดียวกับสองคอลัมน์ในคอลัมน์ขนาดเล็กคุณต้องใช้สิ่งนี้:

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

สาธิตการทำงาน - ขยายเฟรมเพื่อดูว่าคอลัมน์ตอบสนอง

อีก DEMO - ผสมผสานใหม่col-*-5thsชั้นเรียนกับผู้อื่นเช่นและcol-*-3 col-*-2ปรับขนาดเฟรมเพื่อดูการเปลี่ยนแปลงcol-xs-6ในมุมมองตอบสนอง

สำหรับ Bootstrap 4

Bootstrap 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หรือสิ่งที่คล้ายกันทั้งหมดที่คุณต้องทำคือการทำให้การใช้เงินทุนของฟังก์ชั่น mixin 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)
}

ไม่เพียง แต่คุณสามารถสร้างการเรียนเต็มความกว้างจริงบูตคอลัมน์โดยใช้ mixins เหล่านี้ แต่คุณยังสามารถสร้างทุกชั้นเรียนผู้ช่วยที่เกี่ยวข้องเช่น.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ที่ถูกต้องสมบูรณ์ แต่เปลี่ยนความกว้างคอลัมน์หลักสำหรับ bootstrap ทั้งหมด การใช้ฟังก์ชั่นมิกซ์อินข้างต้นจะเพิ่มรูปแบบคอลัมน์ 5 คอลัมน์ที่ด้านบนของคอลัมน์บูตสแตรปเริ่มต้นดังนั้นจึงจะไม่แยกเครื่องมือของบุคคลที่สามหรือสไตล์ที่มีอยู่

อัปเดต 2019

Bootstrap 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 คอลัมน์

ดูเพิ่มเติมที่: Bootstrap - เลย์เอาต์คอลัมน์ 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%;
    }
}

เก็บ bootstrap ดั้งเดิมไว้ด้วย 12 คอลัมน์อย่าปรับแต่ง การปรับเปลี่ยนเพียงอย่างเดียวที่คุณต้องทำคือ css บางส่วนหลังจาก bootstrap responsive 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%

สามคอลัมน์สุดท้าย: 7/12 * 1/3 ~ 19.44%

การแฮ็กดังกล่าวให้ผลลัพธ์ที่ยอมรับได้ในหลายกรณีและไม่ต้องการการเปลี่ยนแปลง CSS ใด ๆ (เราใช้เฉพาะคลาสบูตสแตรปดั้งเดิม)

สร้างการดาวน์โหลด Bootstrap ที่กำหนดเองสำหรับการจัดวาง 5 คอลัมน์

ไปที่หน้าการปรับแต่งBootstrap 2.3.2 (หรือBootstrap 3 ) และตั้งค่าตัวแปรต่อไปนี้ (อย่าใส่เครื่องหมายอัฒภาค):

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

ดาวน์โหลดงานสร้างของคุณ กริดนี้จะบรรจุลงในคอนเทนเนอร์เริ่มต้นโดยรักษาความกว้างของรางน้ำเริ่มต้น (เกือบ)

หมายเหตุ:หากคุณใช้ LESS ให้อัปเดตvariables.lessแทน

ด้วย 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>

ฉันโหวตให้คำตอบของ 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%;
}

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

สร้าง 5 องค์ประกอบด้วย class col-sm-2 และเพิ่มองค์ประกอบแรกยัง class 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>

Bootstrap 4 จำนวนตัวแปรของคอลัมน์ต่อแถว

หากคุณต้องการที่จะมีถึงห้าคอลัมน์ต่อแถวเพื่อให้ตัวเลขน้อยลงคอลัมน์ยังคงใช้เพียงไม่เกิน 1/5 ของแถวแต่ละวิธีการแก้ปัญหาคือการใช้เงินทุนของ 4 mixins :

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>

อีกวิธีในการเปิดใช้งาน 5 คอลัมน์ใน Bootstrap 3 คือการปรับเปลี่ยนรูปแบบ 12 คอลัมน์ที่ใช้โดย Bootstrap จากนั้นสร้างตาราง 20 คอลัมน์ (ใช้กำหนดเองบนเว็บไซต์ Bootstrap หรือใช้รุ่น LESS / SASS)

ในการปรับแต่งบนเว็บไซต์บูตไปที่ปรับแต่งและดาวน์โหลดหน้าปรับปรุงตัวแปร @grid-columnsจากไป12 20จากนั้นคุณจะสามารถสร้าง 4 และ 5 คอลัมน์

มันสามารถทำได้ด้วยการทำรังและใช้ 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 ตัวอย่างคอลัมน์ที่เท่ากัน

และนี่คือการเขียนแบบเต็มบน coderwall

ห้าคอลัมน์ที่เท่ากันใน bootstrap 3

ในความคิดของฉันมันจะดีกว่าที่จะใช้มันเช่นนี้กับไวยากรณ์น้อย คำตอบนี้ขึ้นอยู่กับคำตอบจาก @fizzix

วิธีนี้คอลัมน์ใช้ตัวแปร (@ grid-gutter-width, เบรกพอยต์ของสื่อ) ที่ผู้ใช้อาจมี overriden และลักษณะการทำงานของห้าคอลัมน์ที่ตรงกับลักษณะการทำงานของ 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 */

มันยอดเยี่ยมมาก: http://www.ianmccullough.net/5-column-bootstrap-layout/

แค่ทำ:

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

และ CSS:

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

ตามค่าเริ่มต้น Bootstrap ไม่มีระบบกริดที่ให้เราสร้างเค้าโครงคอลัมน์ห้าคอลัมน์คุณต้องสร้างคำนิยามคอลัมน์เริ่มต้นในแบบที่ 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>

Bootstrap โดยค่าเริ่มต้นสามารถขยายได้สูงสุด 12 คอลัมน์หรือไม่ ซึ่งหมายความว่าหากเราต้องการสร้างเค้าโครง 12 คอลัมน์ที่มีความกว้างเท่ากันเราจะเขียนใน div class = "col-md-1" สิบสองครั้ง

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

เค้าโครง 5 คอลัมน์พร้อมด้วยสไตล์ Bootstrap ของ Twitter

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

วิธีการแก้ปัญหาที่ไม่ต้องการ CSS จำนวนมากและไม่ปรับแต่งรูปแบบการเริ่มต้น bootstrap 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*/
  }
}

เพียงแค่สร้างคลาสใหม่และกำหนดพฤติกรรมของมันสำหรับแต่ละเคียวรีสื่อบันทึกตามต้องการ

@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

ใน bootstrap 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%;
}

คุณสามารถเพิ่มกริด 5 คอลัมน์ใน 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>

ทางออกที่ง่ายที่สุดโดยไม่จำเป็นต้องแก้ไข 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 หวังว่านี่จะช่วยใครซักคน

ห้าคอลัมน์ชัดเจนไม่ใช่ส่วนหนึ่งของ bootstrap โดยการออกแบบ

แต่ด้วย Bootstrap v4 (อัลฟา) มี 2 สิ่งที่ช่วยได้ในการจัดวางตารางที่ซับซ้อน

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

ฉันได้สร้างคำจำกัดความ SASS mixin ตามคำจำกัดความ bootstrap สำหรับจำนวนคอลัมน์ใด ๆ (ส่วนตัวข้าง 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);
  }

}

ฉันหวังว่าบางคนจะพบว่ามีประโยชน์

เป็นคนใช้ bootstrap-sass (v3) นี่คือรหัสง่ายๆสำหรับ 5 คอลัมน์โดยใช้การผสม 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);
     }
  }

ตรวจสอบให้แน่ใจว่าคุณได้รวม:

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

สำหรับ Bootstrap 4.4+

ใช้row-cols-nคลาสใหม่

1. เพิ่มrow-cols-5คลาสให้กับ.rowdiv ของคุณ ไม่จำเป็นต้องใช้ CSS ที่กำหนดเอง
2. ดู 4.4 doc ที่นี่สำหรับ row-cols: https://getbootstrap.com/docs/4.4/layout/grid/#row-columns

สำหรับ Bootstrap 4 เวอร์ชันก่อนหน้า Bootstrap 4.4

1. คัดลอก CSS ด้านล่าง (CSS ที่ยอดเยี่ยมโดยผู้เขียน Bootstrap) และเพิ่มลงในโครงการของคุณ

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