Bootstrap - 行中最后一列末尾的小间距

Question

我试图用多列（col-xs-3，col-xs-3，col-xs-3，col-xs-2，col-xs-1）创建一行，但后来我意识到它总宽度比常规col-xs-12略短。在片段看起来很好，但在我的页面上它没有。有人知道如何解决它吗？

＆＃13;

＆＃13;

.cYellow{
  background-color:#FF0;
}
.cBlue{
  background-color:#00F;
  border:solid 1px black;
}
.cRed{
  background-color:#F00;
  border:solid 1px black;
}
.cGreen{
  background-color:#0F0;
  border:solid 1px black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row cYellow">
    <div class="col-xs-12 cBlue">a</div>
  </div>
  <div class="row cYellow">
    <div class="col-xs-6 cRed">a</div>
    <div class="col-xs-6 cGreen">a</div>
  </div>
  <div class="row cYellow">
    <div class="col-xs-3 cRed">a</div>
    <div class="col-xs-3 cGreen">a</div>
    <div class="col-xs-3 cRed">a</div>
    <div class="col-xs-2 cGreen">a</div>
    <div class="col-xs-1 cRed">a</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这里的问题在于浏览器对像素中表示的小数值的近似值作为百分比规则的结果。

Bootstrap使用列宽的百分比：由于单个像素无法在屏幕上划分，因此与单个全宽度元素相比，多个舍入值的总和可能会降低。

在您的情况下，百分比之和为100％，但元素的计算宽度可能会因容器和视口大小而异，原因在于周期性百分比的近似值：

.col-xs-1{
   width:8.33333333%
}

导致md容器（970px宽）内的计算宽度为48.828px。

解决方案：将最后一个元素浮动到右边

将.pull-right类添加到上一列，以强制它与容器的右边缘对齐。

或者你可以为行指定一个类（例如.my-row）并通过css浮动它的最后一个孩子

.my-row :last-child{
   float:right;
}

通过这种方式，舍入在列之间分配，因此不太明显。

在这里小提琴：https://jsfiddle.net/h7983qmt/