Five equal columns in twitter bootstrap

2019-01-01 13:51发布

站内文章 / 前沿技术
28 0 0

问题:

I want to have 5 equal columns on a page I am building and I can\'t seem to understand how the 5 column grid is being used here: http://web.archive.org/web/20120416024539/http://domain7.com/mobile/tools/bootstrap/responsive

Is the five column grid being demonstrated above part of the twitter bootstrap framework?

回答1:

Use five divs with a class of span2 and give the first a class of 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! Five equally spaced and centered columns.

In bootstrap 3.0, this code would look like

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


回答2:

For Bootstrap 3 and above

A fantastic full width 5 columns layout with Twitter Bootstrap was created here.

This is by far the most advanced solution since it works seamlessly with Bootstrap 3. It allows you to re-use the classes over and over again, in pair with the current Bootstrap classes for responsive design.

CSS:
Add this to your global stylesheet, or even to the bottom of your bootstrap.css document.

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

Put it to use!
For example, if you want to create a div element that behaves like a five column layout on medium screens and like two columns on smaller ones, you just need to use something like this:

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

WORKING DEMO - Expand the frame to see the columns become responsive.

ANOTHER DEMO - Incorporating the new col-*-5ths classes with others such as col-*-3 and col-*-2. Resize the frame to see them all change to col-xs-6 in responsive view.

For Bootstrap 4

Bootstrap 4 now uses flexbox by default, so you get access to its magical powers straight out of the box. Check out the auto layout columns that dynamically adjust width depending on how many columns are nested.

Here\'s an example:

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

WORKING DEMO



回答3:

For Bootstrap 3, if you want full-width and are using LESS, SASS, or something similar, all you have to do is make use of Bootstrap\'s mixin functions make-md-column, make-sm-column, etc.

LESS:

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

Not only can you build true full-width bootstrap column classes using these mixins, but you can also build all the related helper classes like .col-md-push-*, .col-md-pull-*, and .col-md-offset-*:

LESS:

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

Other answers talk about setting @gridColumns which is perfectly valid, but that changes the core column width for all of bootstrap. Using the above mixin functions will add 5 column layout on top of the default bootstrap columns, so it will not break any 3rd party tools or existing styling.



回答4:

Below is a combo of @machineaddict and @Mafnah answers, re-written for Bootstrap 3 (working well for me so far):

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


回答5:

Keep the original bootstrap with 12 columns, do not customize it. The only modification you need to make is some css after the original bootstrap responsive css, like this:

The following code has been tested for 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>

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

Note: Even though the span2 times 5 doesn\'t equal 12 columns, you get the idea :)

A working example can be found here http://jsfiddle.net/v3Uy5/6/



回答6:

Update 2018

Bootstrap 4.0

Here are 5 equal, full-width columns (no extra CSS or SASS) using the auto-layout grid:

<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

This solution works because Bootstrap 4 is now flexbox. You can get the 5 colums to wrap within the same .row using a clearfix break such as <div class=\"col-12\"></div> or <div class=\"w-100\"></div> every 5 columns.

Also see: Bootstrap - 5 column layout



回答7:

Create a custom Bootstrap download for 5 column layout

Go to Bootstrap 2.3.2 (or Bootstrap 3) customization page and set the following variables (don\'t input semicolons):

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

Download your build. This grid would fit into default containers, preserving default gutter widths (almost).

Note: If you are using LESS, update variables.less instead.



回答8:

In case you do no need the exact same width of columns you can try create 5-columns using nesting:

<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

The first two columns will have width equal 5/12 * 1/2 ~ 20.83%

The last three columns: 7/12 * 1/3 ~ 19.44%

Such hack gives the acceptable result in many cases and does not require any CSS changes (we\'re using only the native bootstrap classes).



回答9:

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



回答10:

I voted up Mafnah\'s answer but looking at this again I\'d suggest the following is better if you\'re keeping the default margins etc.

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


回答11:

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


回答12:

Create 5 elements with the class col-sm-2 and add to the first element also the class col-sm-offset-1

P.s. this will not be full width (it will be indented a little from the right and left of the screen)

The code should look something like this 

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


回答13:

Another way to enable 5 columns in Bootstrap 3 is to modify the 12 columns format used by default by Bootstrap. And then create a 20 columns grid (use customize on the Bootstrap website OR use the LESS/SASS version).

To customize on the bootstrap website, go to Customize and Download page, update variable @grid-columns from 12 to 20. Then you will be able to create 4 as well as 5 columns.



回答14:

It can be done with nesting and using a little css over-ride.

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

Then some css

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

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

}

Here is an example: 5 equal column example

And here is my full write up on coderwall

Five equal columns in bootstrap 3



回答15:

In my opinion it is better to use it like this with Less syntax. This answer is based on the answer from @fizzix

This way columns use variables (@grid-gutter-width, media breakpoints) that user may have overriden and the behavior of five columns matches with behavior of 12 column grid.

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


回答16:

This is awesome: http://www.ianmccullough.net/5-column-bootstrap-layout/

Just do:

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

And CSS:

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


回答17:

By default Bootstrap does not provide grid system that allows us to create five columns layout, you need to create default column definition in the way that Bootstrap do create some custom classes and media queries in your css file

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

and some html code

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


回答18:

A solution that do not require a lot of CSS, nor tweaking bootstrap default 12col layout:

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


回答19:

In bootstrap 3, I think we can do something like that, for remove left and right margin :

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

and CSS

.this_row {
    margin: 0 -5%;
}


回答20:

How You can add 5 columns grid in 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>



回答21:

Bootstrap by default can scale up to 12 columns? This means if we want to create a 12-column layout of equal width, we would write inside div class=\"col-md-1\" twelve times.

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


回答22:

the easiest solution without any need to edit CSS would be:

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

And if you need those to break beyond any breakpoint, just make btn-group block. Hope this helps someone.



回答23:

Five columns are clearly not the part of bootstrap by design.

But with Bootstrap v4 (alpha), there are 2 things to help with a complicated grid layout

  1. Flex (http://v4-alpha.getbootstrap.com/getting-started/flexbox/), the new element type (official - https://www.w3.org/TR/css-flexbox-1/)
  2. Responsive utilities (http://v4-alpha.getbootstrap.com/layout/responsive-utilities/)

In simple term, I\'m using

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

Be it 5,7,9,11,13 or something odds, it\'ll be okay. I\'m quite sure that 12-grids standard is able to serve more than 90% of use case - so let\'s design that way - develop more easier too!

The nice flex tutorial is here \"https://css-tricks.com/snippets/css/a-guide-to-flexbox/\"



回答24:

I\'ve created SASS mixin definitions based on bootstrap definitions for any number of columns (personally beside 12 I use 8, 10 and 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);
}

And you can simply create classes by:

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

}

I hope someone will find it useful



回答25:

5 columns layout with Twitter Bootstrap style

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


回答26:

Just create a new class and define its behaviour per each each media query as needed

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

here is a working demo https://codepen.io/giorgosk/pen/BRVorW



回答27:

Bootstrap 4, variable number of columns per row

If you want to have up to five columns per row, so that fewer numbers of columns still only take up 1/5th of the row each, the solution is to use Bootstrap 4\'s mixins:

SCSS:

.col-2-4 {
  @include make-col-ready(); // apply standard column margins, padding, etc.
  @include make-col(2.4); // 12/5 = 2.4
}

HTML:

<div class=\"container\">    
  <div class=\"row\">
    <div class=\"col-2-4\">1 of 5</div>
    <div class=\"col-2-4\">2 of 5</div>
    <div class=\"col-2-4\">3 of 5</div>
    <div class=\"col-2-4\">4 of 5</div>
    <div class=\"col-2-4\">5 of 5</div>
  </div>
  <div class=\"row\">
    <div class=\"col-2-4\">1 of 2</div> <!-- same width as column \"1 of 5\" above -->
    <div class=\"col-2-4\">2 of 2</div> <!-- same width as column \"2 of 5\" above -->
  </div>
</div>


回答28:

Is someone uses bootstrap-sass (v3), here is simple code for 5 columns using bootstrap mixings:

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

Make sure you have included:

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


回答29:

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



回答30:

For twitter bootstrap 3 this is the most simple way to achieve this:

<section class=\"col col-sm-3\" style=\"width: 20%;\">
<section class=\"col col-sm-3\" style=\"width: 20%;\">
<section class=\"col col-sm-3\" style=\"width: 20%;\">
<section class=\"col col-sm-3\" style=\"width: 20%;\">
<section class=\"col col-sm-3\" style=\"width: 20%;\">


标签： twitter-bootstrap twitter-bootstrap-3 bootstrap-4
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~