Bootstrap 3 - 连续超过12列 [英] Bootstrap 3 - More than 12 columns in a row

问题描述

我遇到了一个情况，我需要不限制行中的列数，因为潜在的多个内容块将被添加到管理中的地方的区域。

I ran into a situation where I was required not to limit the number of columns in a row since potentially multiple blocks of content would be added to the area from places in the admin.

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

By default BS3's behavior tells 12 column divs not to float which causes them to go over the top of the smaller floated divs. So I've written an override as a class for my system and thought I would share in case anyone else has the issue.

如果任何人有更好的想法或建议我会喜欢我觉得我不是黑客Bootstrap ...但这里是我解决它。

If anyone has a better idea or suggestion I would love to feel like I'm not hacking Bootstrap ... but here's how I solved it.

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

推荐答案

我知道我迟到了邮政，但我认为你的关注是在一行中总共超过12个单位。使用超过12，没有什么错，事实上Bootstrap文档的状态：

I know that I'm a little late on this post, but I think your concern is having cols that total more than 12 units in a single row. There is nothing wrong with using more than 12, and in fact the Bootstrap docs state:

如果超过12列放置在单行，每组额外列将作为一个单位换行换行

"If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line"

文档中还有一些示例，说明为什么需要这个列包装： http://getbootstrap.com/css/#grid-example-wrapping 。在< row> 标签中有多于12个单位的确定。

There are also examples in the docs that demonstrate why this "column wrapping" in necessary: http://getbootstrap.com/css/#grid-example-wrapping. It's ok to have more that 12 units in a single <row> tag.

a href =http://blog.codeply.com/2016/04/06/how-the-bootstrap-grid-really-works/>引导网格

Read more about the Bootstrap grid

这篇关于Bootstrap 3 - 连续超过12列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！