Question

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

这在bootstrap中是否有效排在行内 2. cols里面的多个cols

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

Answer 1

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

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

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

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

Cols里面的Cols bootstrap padding右边的问题

1 个答案: