Bootstrap 3 - 连续使用超过 12 列答案

【问题标题】：Bootstrap 3 - Use more than 12 columns in a rowBootstrap 3 - 连续使用超过 12 列
【发布时间】：2014-10-31 16:21:53
【问题描述】：

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

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

【问题讨论】：

将您的代码放入“代码”包装中

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

在.row 中使用更多列单位并没有错，事实上，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。

【讨论】：

【解决方案2】：

Bootstrap 是为 12 列使用而设计的。

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

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

【讨论】：

如果我只需要一个尺寸为 18 的网格用于特定标记，而其余部分保持原样，该怎么办？
我猜你需要手动完成，Bootstrap 有它自己的限制。但是你仍然可以保留一个 12 列的模板：首先使用.col-2，你会得到 6 列。然后，每列被划分为.col-4 元素（= 3 列）。因此你得到 3*6 = 18 列（大小相等）。
谢谢。我刚刚发现，即使它有 12 列，我也可以在不定义新行的情况下添加超过 12 列。它会将列换行到新行。我不知道你能做到这一点，但这对我来说已经足够了，因为将列大小更改为 18 可能在我的显示器上工作，但在手机、平板电脑或电视上就不行了。因此，如果我们使用引导程序，这将适合屏幕空间，我认为 12 的硬编码网格在这种情况下是无关紧要的。我只是将它定义为col-lg-1，即使我有 100 个这样的 div。 BootStrap 将其整理出来，采用包装 col 大小。

【解决方案3】：

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

max-width:100%;
float:left;

【讨论】：