Question

我正在使用特定的装订线尺寸：

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

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

基本上，我希望gutter只有10px但只能在列之间。

然而，行的宽度比容器的宽度小2 px。我尝试将border设置为0，但无济于事。

编辑：我忘了设置容器的填充以匹配排水沟。修正了它。

但是，我的列宽为118.2345，或者说应该是120的确切值。为什么会这样？

Answer 1

这样的事情怎么样：

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

编辑：

至于获得小数宽度的原因，这是因为列宽是基于百分比的，具体取决于总父宽度。因此，请检查父容器的宽度。

为什么Bootstrap 3列宽不准确？

1 个答案: