Question

我遇到了一种情况，我不需要限制一行中的列数，因为可能会有多个内容块从管理中的位置添加到该区域。

默认情况下，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

在.row中使用 more 而不是12个列单位没有任何问题，实际上Bootstrap文档声明：

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

文档中还有一些示例说明为什么必要的“列包装”：https://getbootstrap.com/docs/3.3/css/#grid-example-wrapping。只需记住一个.row.标记中的12个单位即可，只需记住您可能需要使用自适应重置。 12个单位是视觉行的限制（横跨视口的水平），但不一定是.row div，它只是一组列。

详细了解Bootstrap grid以及为何more than 12 in a row is often necessary。

Answer 2

Bootstrap用于12-col使用。

如果您想拥有更多列，则需要在Bootstrap Less变量（see here）的帮助下定义自定义响应网格。您将主要需要更改这些变量：

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

Answer 3

如果您需要使用大量网格的灵活性和响应能力，您可以使用死简单网格https://github.com/mourner/dead-simple-grid，并尽量减少网格中媒体查询的使用，并让

流动

＆＃13;

max-width:100%;
float:left;

＆＃13;

Bootstrap 3 - 连续使用12列以上

3 个答案: