css - 为什么Bootstrap 3列宽不正确？

我通过这样做使用特定的装订线大小：

  div[class^="col"]{padding-left:5px; padding-right:5px;}

  .row{
    margin-left:-5px;
    margin-right:-5px;
    border: 0px;
  }

基本上，我希望装订线仅在列之间为10px。

但是，行的宽度比容器的宽度小2 px。我尝试将border设置为0，如上所述，无济于事。

编辑：我忘记设置容器的填充以匹配装订线。这样就解决了。

但是，我得到的列宽为118.2345或应为精确值120的值。为什么？

最佳答案

这样的事情怎么样：

.row {margin-left:0;margin-right:0;}
.row div[class^="col"]{padding-left:5px; padding-right:5px;}
.row div[class^="col"]:first-child{padding-left:0;}
.row div[class^="col"]:last-child{padding-right:0;}

当然，这假设您要显示的每一行实际上都由.row类修饰。因此，以下内容将无法正常工作

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

但如下所示：

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

编辑：

至于为什么要获得十进制宽度，那是因为列宽是基于百分比的，取决于总父宽度。因此，请检查父容器的宽度。