Bootstrap 3 - 连续使用12列以上

Question

我遇到了一种情况,我被要求不限制一行中的列数,因为可能会有多个内容块从admin中的位置添加到该区域.

默认情况下,BS3的行为告诉12列div不浮动,这导致它们越过较小的浮动div的顶部.所以我写了一个覆盖作为我的系统的类,并认为我会分享以防其他人有问题.

如果有人有更好的想法或建议,我很乐意觉得我不是黑客入侵Bootstrap ......但这就是我如何解决它.

  /* col-xs float fix for large column groups */  
  .large-group .col-xs-12 {
    float: left;    
  }

  /* col-sm float fix for large column groups */    
  @media (min-width: 768px) {    
    .large-group .col-sm-12 {    
      float: left;    
    }    
  }

  /* col-md float fix for large column groups */    
  @media (min-width: 992px) {    
    .large-group .col-md-12 {    
      float: left;    
    }    
  }

  /* col-lg float fix for large column groups */    
  @media (min-width: 1200px) {
    .large-group .col-lg-12 {    
      float: left;    
    }    
  }

<div class="container">
  <div class="row large-group" style="background-color:#ebebeb;">    
    <div class="col-xs-9"><div style="background-color:#babeee;"><p>col 9</p></div></div>    
    <div class="col-xs-3"><div style="background-color:#fefeeb;"><p>col 3</p></div></div>    
    <div class="col-xs-12"><div style="background-color:#bada55;"><p>col 12</p></div></div>    
  </div>    
</div>

Answer 1

没有什么错误使用更比12个单位.row,而实际上引导文档状态:

"如果在一行中放置超过12列,则每组额外列将作为一个单元包裹到新行上"

文档中还有一些示例说明为什么必要的"列包装":https://getbootstrap.com/docs/3.3/css/#grid-example-wrapping..row.只需记住您可能需要使用响应式重置,只需在单个标签中包含12个单元即可.12个单位是视觉行的限制(横跨视口的水平),但不一定是.rowdiv,它只是一组列.

阅读有关Bootstrap网格的更多信息,以及为什么经常需要连续12个以上的网格.

Answer 2

Bootstrap是为12-col使用而制作的.

如果您想拥有更多列,则需要在Bootstrap Less变量的帮助下定义自定义响应网格(请参见此处).您将主要需要更改这些变量:

• @grid-columns:网格中的列数.
• @grid-gutter-width列之间的填充.左右分为两半.