Bootstrap 3 - 连续超过12列

我遇到了一种情况，我要求不要限制连续的列数，因为可能会将多个内容块从管理员的地方添加到该区域。Bootstrap 3 - 连续超过12列

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

来源

2014-10-31 asleep

把你的代码放在“代码”中 – LorDex 2014-10-31 16:26:50

引导被用于12-COL用法制成。

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

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

来源

2014-10-31 16:25:32 zessx

如果我只需要一个大小为18的网格用于特定的标记但是保持原样呢？ – ppumkin 2015-02-24 12:38:34

你需要手动去做，我猜，Bootstrap有它自己的局限性。但你仍然可以保留一个12列的模板：首先使用'.col-2'，你将得到6列。然后，每列被分成'.col-4'元素（= 3列）。因此你得到3 * 6 = 18列（相同的大小）。 – zessx 2015-02-24 14:42:35

谢谢。我发现，即使它的12列，我可以添加超过12列而无需定义新行。它将把columne换成新的一行。我不知道你可以做到这一点，但这对我来说足够好，因为将列大小更改为18可能适用于我的显示器，但不适用于手机，平板电脑或电视机。因此，如果我们使用引导程序，这将适合屏幕空间，我认为在这种情况下，12的硬编码网格是无关紧要的。我只是把它定义为'col-lg-1'，即使我有100个div。 BootStrap将它排列在包装尺寸中。 – ppumkin 2015-02-24 14:46:22

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

max-width:100%; 
 
float:left;

流

来源

2014-10-31 16:35:30

这没有什么错在.row使用更超过12个单位为，而实际上引导文档状态：

“如果超过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。

来源

2015-06-25 11:29:04 ZimSystem

Bootstrap 3 - 连续超过12列

回答

相关问题