在Twitter的引导五个等于列在Twitter的引导五个等于列(Five equal column

2019-05-13 18:19发布

站内文章 / 移动开发
11 0 0

我想有一个网页我建立的5等分列，我似乎无法理解如何在5柱网正在这里使用： http://web.archive.org/web/20120416024539/http://domain7 .COM /移动/工具/引导/响应

高于Twitter的引导框架的一部分被证明五柱网？

Answer 1:

用五年的div类跨距2中，给第一类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>

瞧！ 五个等距隔开并居中列。

在引导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>


Answer 2:

自举3及以上

一个梦幻般的全宽 5列与Twitter的引导布局创建这里 。

这是迄今为止最先进的解决方案，因为它的工作原理无缝地与引导3.它可以让你与当前自举类为响应式设计一遍又一遍重复使用的类，在对。

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>

工作演示 -展开帧看到列将成为响应。

另一个演示示例 -结合新的col-*-5ths个教学班，其他如col-*-3和col-*-2 。 调整框架一饱眼福变化col-xs-6在响应视图。

对于引导4

引导4现在默认使用Flexbox的，所以您可以访问它的魔力直开箱。 退房的自动布局列 ，取决于多少列嵌套动态调整宽度。

下面是一个例子： 

<div class="row">
   <div class="col">
      1 of 5
   </div>
   <div class="col">
      2 of 5
   </div>
   <div class="col">
      3 of 5
   </div>
   <div class="col">
      4 of 5
   </div>
   <div class="col">
      5 of 5
   </div>
</div>

工作演示



Answer 3:

自举3，如果你想全角和使用LESS ， SASS ，或类似的东西，所有你需要做的就是利用自举的混入功能 make-md-column ， make-sm-column等。

减： 

.col-lg-2-4{
  .make-lg-column(2.4)
}
.col-md-2-4{
  .make-md-column(2.4)
}
.col-sm-2-4{
  .make-sm-column(2.4)
}

上海社会科学院： 

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

您不仅可以建立使用这些混入真正的全宽引导柱类 ，但你也可以建立所有相关的辅助类，如.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这是完全有效的，但会更改所有引导的芯柱的宽度。 使用上面的mixin功能将添加的默认引导列的前5栏布局，因此它不会破坏任何第三方工具或现有的造型。



Answer 4:

下面是@machineaddict和@Mafnah答案，用于引导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%;
    }
}


Answer 5:

保持原有的引导与12列，不自定义它。 你需要做的唯一修改是原来的引导响应CSS 后一些CSS，就像这样：

下面的代码已经过测试，引导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>

注意：即使跨距2次5不等于12列，你的想法:)

工作示例可以在这里找到http://jsfiddle.net/v3Uy5/6/



Answer 6:

更新2018

引导4.0

下面是使用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

该解决方案的工作，因为引导4现在Flexbox的。 你可以得到5个colums到相同的内包裹.row使用clearfix断裂如<div class="col-12"></div>或<div class="w-100"></div>每5列。

另请参见： 引导- 5列布局



Answer 7:

如果你这样做没有必要列完全相同的宽度，你可以尝试创建使用嵌套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的变化（我们只使用本地自举类）。



Answer 8:

创建自定义引导下载5列布局

转到自引导2.3.2 （或引导3 ）定制页面和设置下列变量（不要输入分号）： 

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

下载您的构建。 该网格将融入默认容器，保持默认的装订线宽度（几乎）。

注：如果您使用较少，更新variables.less代替。



Answer 9:

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



Answer 10:

我投了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%;
}


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


Answer 12:

创建5个元素与类COL-SM-2，并加入到所述第一元件还类COL-SM-偏移-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>


Answer 13:

另一个以使在引导3 5列的方式是通过修改引导默认使用的12列格式。 然后创建一个20列格（使用定制引导网站上或使用LESS / SASS版）。

要自定义引导网站上，去定制和下载页面，更新变量@grid-columns从12到20 。 然后，你将能够创建4和5列。



Answer 14:

它可以与嵌套和使用一些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全写起来

自举3五个等于列



Answer 15:

在我看来，这是更好用更少的语法像这样使用。 这个答案是基于答案从@fizzix

这种方式列使用变量（@网格沟宽度，媒体断点），该用户可能已经重写和五列的行为与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 */


Answer 16:

这是真棒： http://www.ianmccullough.net/5-column-bootstrap-layout/

做就是了： 

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

和CSS： 

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


Answer 17:

默认情况下，引导不提供网格系统，使我们能够创建五点布局，则需要在引导做创建你的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>


Answer 18:

引导默认情况下最多可扩展到12列？ 这意味着，如果我们想创建相等宽度的12列布局，我们的div类=“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>


Answer 19:

5列布局，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;
    }
}


Answer 20:

不需要大量的CSS，也不扭捏引导默认12col布局中的解决方案：

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

HTML： 

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

CSS： 

@media (min-width: 1200px) { /*if not lg, change this criteria*/
  .stretch{
    width: 120%; /*the actual trick*/
  }
}


Answer 21:

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

@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



Answer 22:

在引导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%;
}


Answer 23:

如何可以添加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>



Answer 24:

没有任何需要编辑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-组块。 希望这可以帮助别人。



Answer 25:

五列显然不是通过设计引导的一部分。

但随着引导V4（阿尔法），有两件事情来帮助一个复杂的网格布局

  1. FLEX（ http://v4-alpha.getbootstrap.com/getting-started/flexbox/ ），新元素类型（官方- https://www.w3.org/TR/css-flexbox-1/ ）
  2. 响应公用事业（ http://v4-alpha.getbootstrap.com/layout/responsive-utilities/ ）

简单来说，我使用

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

无论是5,7,9,11,13或某事的赔率，它会好起来的。 我敢肯定的是12格的标准是能够服务的使用情况下，90％以上 - 让我们设计这样 - 开发更容易过！

漂亮的柔性教程是在这里“ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ”



Answer 26:

我创建了上海社会科学院基础上引导定义为任意数量的列（个人旁边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);
  }

}

我希望有人会发现它有用



Answer 27:

是否有人使用自举SASS（V3），这里是用引导混控5列简单的代码： 

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

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

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

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

请确保你已经包括： 

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


Answer 28:

自举4，每行的列的可变数量

如果你想有每行最多五列，以便列数较少仍只占据各行的1/5，解决方案是使用引导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>


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



Answer 30:

对于Twitter的引导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%;">


文章来源: Five equal columns in twitter bootstrap
标签： twitter-bootstrap twitter-bootstrap-3 bootstrap-4
举报

收藏的人(0)

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