Css 引导3-一行中使用超过12列

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

默认情况下，BS3的行为告诉12列div不要浮动，这会导致它们超出较小浮动div的顶部。因此，我为我的系统编写了一个覆盖类，并认为如果其他人有此问题，我会与大家分享

如果有人有更好的想法或建议，我会喜欢感觉我不是黑客引导。。。但我是这样解决的

  /* 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;    
    }    
  }

      
第9列

col3

第12列

      

引导是为12列使用而设计的。

如果希望有更多的列，则需要在无引导变量（）的帮助下定义自定义响应网格。您主要需要更改以下变量：

• @grid columns

  ：网格中的列数

• @网格边沟宽度

  列之间的填充。被分成左右两半

---

如果您需要大量网格的灵活性和响应能力，您可以使用非常简单的网格，还可以尽量减少网格中媒体查询的使用，并让其随波逐流

最大宽度：100%；
浮动：左在
.row
中使用超过12个列单位没有问题，事实上，引导文档状态为：

如果一行中有超过12列，每组额外列将作为一个单元换行

文档中也有一些示例演示了为什么需要使用“列包装”：。单个
行中可以有12个以上的单元。
标记，请记住您可能需要使用响应重置。12个单位是可视行的限制（水平穿过视口），但不一定是
.row
div，它只是一组列

阅读更多有关的信息，以及原因。
将您的代码放入“代码”包装中。如果我只需要一个大小为18的网格用于特定标记，但其余部分保持不变，那么我想您需要手动完成。引导有其自身的局限性。但是您仍然可以保留12列模板：首先使用
.col-2
，您将得到6列。然后，将每列分成
.col-4
元素（=3列）。这样就得到了3*6=18列（大小相等）。谢谢。我刚刚发现，即使它有12列，我也可以在不定义新行的情况下添加超过12列。它会将该列换行。我不知道你可以这样做，但这对我来说已经足够好了，因为将列大小更改为18可能会在我的显示器上工作，但在手机、平板电脑或电视上则不行。因此，如果我们使用引导，这将适合屏幕空间，我认为硬编码的网格12在这种情况下是不相关的。我只是把它定义为
col-lg-1
，即使我有100个这样的div。BootStrap按包装颜色大小对其进行分类。
<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>