Cols内的Cols引导填充左右问题答案

【问题标题】：Cols inside Cols bootstrap padding right left issueCols内的Cols引导填充左右问题
【发布时间】：2016-09-06 14:42:16
【问题描述】：

    <div class="first-row">
        <div class="col-sm-6">
            <div class="row first-row">
                 <div class="col-sm-3">
                    <label>Test Type</label>
                 </div>
                 <div class="col-sm-9">
                    <select class="form-control">
                       <option value="-1">Please select</option>
                       <option value="2">Operating System</option>
                       <option value="3">U</option>
                     </select>
                 </div>
             </div>
        </div>
    </div>

这在引导程序中是否有效 1. 行内行 2. cols中的多个cols

我知道两者都会运行，但这是正确的方法吗？当我们在 col 内执行 col 时，我们必须面对上 col div 和内部 div 的填充问题......所以我必须手动制作向右填充 0px。我只是想知道这是否是正确的方法...或任何其他方法请建议

【问题讨论】：

在引导程序中为 12 列提供了一行，那么您的第一行中是否还有另一个
？除此之外，是的，您可以使用列内的行，但除非您要在其中放入多行，否则我不确定您为什么要这样做。您确实必须注意填充。

标签： css twitter-bootstrap

【解决方案1】：

在 Bootstrap 中，通常你必须使用 .row 来包装你的 cols，因为 .row 有两个主要角色：

cols 有float:left 属性，这意味着你的cols 容器的高度会缩小并损坏页面的流动，所以.row 通过添加来修复它
```
.row:after{
 display:table;
 content:'';
 clear:both;
}
```

.row通过添加负边距清除最左边和最右边的不需要的填充

.row{
 margin-left:-15px;
 margin-right:-15px;
}

因此，如果您有嵌套的 cols，则必须将其包装成一行，例如

<div class="row">
  <div class="col-sm-6">
    <div class="row ">
         <div class="col-sm-3">

         </div>
         <div class="col-sm-9">

         </div>
     </div>
  </div>
</div>

【讨论】：