Bootstrap 3 - 连续使用超过 12 列 [英] Bootstrap 3 - Use more than 12 columns in a row

问题描述

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

默认情况下，BS3 的行为告诉 12 列 div 不要浮动，这会导致它们越过较小的浮动 div 的顶部.因此，我为我的系统编写了一个覆盖作为类，并认为我会分享以防其他人遇到问题.

如果有人有更好的想法或建议，我很乐意感觉我不是在破解 Bootstrap ......但这是我解决它的方法.

/* col-xs float 修复大列组 */.large-group .col-xs-12 {向左飘浮;}/* 大列组的 col-sm 浮动修复 */@media(最小宽度:768px){.large-group .col-sm-12 {向左飘浮;}}/* 大列组的 col-md 浮动修复 */@media(最小宽度:992px){.large-group .col-md-12 {向左飘浮;}}/* col-lg float 修复大列组 */@media(最小宽度:1200px){.large-group .col-lg-12 {向左飘浮;}}

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

解决方案

在 .row 中使用多于 12 个列单元并没有错，事实上Bootstrap 文档状态:

<块引用>

如果在一行中放置了超过 12 列，每组额外的列将作为一个单元换行"

文档中还有一些示例说明了为什么需要这种列包装":https://getbootstrap.com/docs/3.3/css/#grid-example-wrapping.在一个 .row. 标签中可以有超过 12 个单元，但请记住，您可能需要使用响应式重置.12 个单位是视觉行的限制(水平跨视口)，但不一定是 .row div，它只是一组列.

阅读更多关于 引导网格，以及为什么 超过 12 行是经常需要.

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.

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.

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>

解决方案

There is nothing wrong with using more than 12 column units in .row, and in fact the Bootstrap docs state:

"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"

There are also examples in the docs that demonstrate why this "column wrapping" in necessary: https://getbootstrap.com/docs/3.3/css/#grid-example-wrapping. It's ok to have more that 12 units in a single .row. tag, just remember you may need to use responsive resets. 12 units is a limit of the visual row (horizontally across the viewport), but not necessarily a .row div which is simply a grouping of columns.

Read more about the Bootstrap grid, and why more than 12 in a row is often necessary.

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