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

Question

我通过这样做使用特定的装订线尺寸:

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

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

基本上，我希望间距为 10px，但仅在列之间。

但是，行的宽度比容器的宽度小 2 像素。我尝试将 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>

编辑:

至于为什么得到小数宽度，那是因为列宽是基于百分比的，具体取决于父级的总宽度。所以检查父容器的宽度。