引导多个列不起作用答案

【问题标题】：Bootstrap multiple cols not working引导多个列不起作用
【发布时间】：2016-12-20 11:02:23
【问题描述】：

所以，当我为我的 imgs 标签键入多个 cols 时，只有 md 一个在工作。这就是它的结构：

这就是lg屏幕的样子：

【问题讨论】：

标签： html twitter-bootstrap grid

【解决方案1】：

每行类中的列数必须为 12。对于图像也使用 img-responsive 类。 http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

请检查此代码盘 codepen.io/payalpatel2299/pen/dOaLgd

【讨论】：

问题是，既然lg、md、sm的数量不同，需要和lg在同一行内，那该怎么办？
请再次检查codepan。我添加了 clearfix div。你也可以使用偏移量codepen.io/payalpatel2299/pen/dOaLgd
一个 Bootstrap 行可以连续超过 12 列。这称为列换行。

【解决方案2】：

在每个class="row"之间，段的总和应该是12。请注意以下代码...

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

【讨论】：

我知道我知道...但是当我需要放置 lg、md 和 sm 尺寸时？例如 6 col-lg-2 和 3 col-md-4 ？他们不适合在同一行...
为sm 开发。摆脱 md 和 lg 并使用 sm 在所有分辨率下尝试您的代码。