Bootstrap 3网格系统超过12个cols不会下降到新行

Bootstrap 3的网格系统是基于12列布局设计的，这意味着每一行最多可以容纳12列。如果你在一个行（row）中放置了超过12列，那么超出的列将不会自动换行到下一行，而是会继续在同一行上延伸，这通常不是预期的布局效果。

基础概念

Bootstrap的网格系统通过使用.container、.row和.col-*-*类来创建响应式布局。.col-*-*类中的第一个星号代表设备尺寸（如xs、sm、md、lg），第二个星号代表列数。

相关优势

• 响应式设计：Bootstrap网格系统允许开发者轻松创建适应不同屏幕尺寸的布局。
• 灵活性：可以混合使用不同宽度的列来创建复杂的布局。
• 移动优先：Bootstrap的设计哲学是先为小屏幕设计，然后逐步增强到大屏幕。

类型

• 固定宽度：列的总宽度是固定的，通常是1200px。
• 流式布局：列的宽度会根据父容器的宽度变化而变化。

应用场景

• 网站布局：用于创建网站的头部、导航、内容区域、侧边栏和页脚。
• 仪表板：用于展示数据和图表的多列布局。
• 电子商务网站：用于产品列表和购物车的布局。

问题原因

当你在Bootstrap 3中使用超过12列时，这些列不会自动换行，因为网格系统的设计是基于每行12列的限制。超出这个限制的列会尝试在同一行内排列，导致布局混乱。

解决方法

要解决这个问题，你需要手动将列分组到多个.row中，确保每个.row中的列数不超过12。如果需要创建更复杂的布局，可以使用嵌套的.row和.col-*-*。

示例代码

<div class="container">
  <div class="row">
    <div class="col-md-4">Column 1</div>
    <div class="col-md-4">Column 2</div>
    <div class="col-md-4">Column 3</div>
  </div>
  <div class="row">
    <div class="col-md-6">Column 4</div>
    <div class="col-md-6">Column 5</div>
  </div>
  <div class="row">
    <div class="col-md-3">Column 6</div>
    <div class="col-md-3">Column 7</div>
    <div class="col-md-3">Column 8</div>
    <div class="col-md-3">Column 9</div>
  </div>
</div>

在这个例子中，我们创建了三个.row，每个.row中的列数都没有超过12，这样就可以保证布局的正确性。

参考链接

Bootstrap 3网格系统文档

通过这种方式，你可以确保你的布局在不同设备上都能保持良好的视觉效果，并且避免因为列数过多而导致的问题。