首页 文章

在twitter bootstrap中有五个相等的列

提问于
浏览 次
313

我希望在我正在构建的页面上有5个相等的列，我似乎无法理解这里是如何使用5列网格的：http://web.archive.org/web/20120416024539/http://domain7.com/mobile/tools/bootstrap/responsive

五列网格是否在twitter引导框架的上方展示了？

twitter-bootstrap twitter-bootstrap-3 bootstrap-4

30 回答

  • 8

    对于twitter bootstrap 3，这是实现此目的的最简单方法：

    <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%;">
    回复于
  • 2

    使用具有span2类的五个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>

    瞧！五个等距和中心的列 .

    在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>
    回复于
  • 26

    对于Bootstrap 3及以上版本

    使用Twitter Bootstrap创建了一个非常棒的 full width 5列布局here .

    这是迄今为止最先进的解决方案，因为它与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;
    }
}

    Put it to use!
    例如，如果要在中等屏幕上创建一个行为类似五列布局的div元素，而在较小的一行上创建两列，则只需要使用以下内容：

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

    WORKING DEMO - 展开框架以查看列变为响应 .

    ANOTHER DEMO - 将新的 col-*-5ths 类与 col-*-3 和 col-*-2 等其他类合并 . 调整框架大小以查看它们在响应视图中更改为 col-xs-6 .

    For Bootstrap 4

    Bootstrap 4现在默认使用flexbox，因此您可以直接使用它的神奇力量 . 查看auto layout columns，根据嵌套的列数动态调整宽度 .

    这是一个例子：

    <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

    回复于
  • 29

    对于 Bootstrap 3 ，如果你想 full-width 并且正在使用 LESS ， SASS 或类似的东西，你所要做的就是使用Bootstrap's mixin functions 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)
}

    上海社会科学院：

    .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构建 true full-width bootstrap column classes ，还可以构建所有 related helper classes ，如 .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)
}

    上海社会科学院：

    .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的核心列宽 . 使用上面的mixin函数将在默认引导列的顶部添加5列布局，因此它不会破坏任何第三方工具或现有样式 .

    回复于
  • 18

    下面是@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%;
    }
}
    回复于
  • 1

    保留原始引导程序有12列，不要自定义它 . 你需要做的唯一修改是一些css after 原始的bootstrap响应式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>

    Note: 即使span2乘以5不等于12列，你也明白了:)

    一个工作的例子可以在这里找到http://jsfiddle.net/v3Uy5/6/

    回复于
  • 449

    更新2018年

    Bootstrap 4.0

    以下是使用auto-layout grid的5个相等的全宽列（ no extra CSS or 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 . 您可以使用clearfix break（例如 <div class="col-12"></div> 或 <div class="w-100"></div> 每5列）将5个colums包含在相同的 .row 中 .

    另见：Bootstrap - 5 column layout

    回复于
  • 5

    为5列布局创建自定义Bootstrap下载

    转到Bootstrap 2.3.2（或Bootstrap 3）自定义页面并设置以下变量（不要输入分号）：

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

    下载你的版本 . 此网格适合默认容器，保留默认的装订线宽度（几乎） .

    Note: 如果您使用的是LESS，请更新 variables.less .

    回复于
  • 2

    如果您不需要 exact 相同宽度的列，您可以尝试使用嵌套创建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％

    在许多情况下，这样的hack提供了可接受的结果，并且不需要任何CSS更改（我们仅使用本机引导类） .

    回复于
  • 1

    使用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>
    回复于
  • 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%;
}
    回复于
  • 0
    <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

    使用类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>
    回复于
  • 1

    在Bootstrap 3中启用5列的另一种方法是修改Bootstrap默认使用的12列格式 . 然后创建一个20列网格（在Bootstrap网站上使用customize或使用LESS / SASS版本） .

    要在引导程序网站上进行自定义，请转到Customize and Download页面，将变量 @grid-columns 从 12 更新为 20 . 然后，您将能够创建4列和5列 .

    回复于
  • 3

    无需编辑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块 . 希望这有助于某人 .

    回复于
  • 1

    它可以通过嵌套和使用一点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 equal column example

    这是我在coderwall上的全文

    Five equal columns in bootstrap 3

    回复于
  • 1

    在我看来，最好像使用Less语法一样使用它 . 这个答案基于@fizzix的answer

    这样，列使用用户可能覆盖的变量（@ grid-gutter-width，media breakpoints），并且五列的行为与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 */
    回复于
  • 0

    这太棒了：http://www.ianmccullough.net/5-column-bootstrap-layout/

    做就是了：

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

    和CSS：

    .col-xs-15{
    width:20%;
}
    回复于
  • 4

    默认情况下，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>
    回复于
  • 2

    一个不需要大量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*/
  }
}
    回复于
  • 8

    在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%;
}
    回复于
  • 2

    如何在bootstrap中添加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>
    回复于
  • 1

    默认情况下，Bootstrap最多可以扩展到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>
    回复于
  • 4

    五列显然不是设计引导程序的一部分 .

    但是使用Bootstrap v4（alpha），有两件事可以帮助解决复杂的网格布局问题

    简单来说，我正在使用

    <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-grid标准能够满足超过90％的用例 - 所以让我们这样设计 - 开发也更容易！

    精彩的flex教程在这里“https://css-tricks.com/snippets/css/a-guide-to-flexbox/”

    回复于
  • 2

    我已根据任意数量的列的引导定义创建了SASS mixin定义（我个人使用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);
  }

}

    我希望有人会发现它很有用

    回复于
  • 1

    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;
    }
}
    回复于
  • 364

    只需创建一个新类，并根据需要为每个媒体查询定义其行为

    @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

    回复于
  • 1

    Bootstrap 4，每行可变列数

    如果你想每行最多有五列，那么较少数量的列仍然只占每行的1/5，解决方案是使用Bootstrap 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
}

    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>
    回复于
  • 1

    有人使用bootstrap-sass（v3），这里是使用bootstrap混合的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";
    回复于
  • 159
    .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%;
  }
}
    回复于

相关问题