Html 引导网格3个项目，每个项目占33%

我对Bootstrap的网格系统有问题。我得到了三列，每个列都是col-XX-4，每一秒都是像素，我用这三个元素来重新划分窗口，结果是比100%可用宽度（本例中为930px）小了一小部分像素。这是令人不安的原因，因为上面的元素是一个引导转盘，100%的宽度完美地工作，始终保持930px

以下是我的意思（我放大了很多）：

这是一张缩小的图片：

我使用的HTML代码是：

<!-- Puffs Start -->
<div class="row">
  <?php if (have_rows('puffs')):
          $iterations = 0;
          while(have_rows('puffs')): the_row();
            $iterations++;
            $headline = get_sub_field('headline');
            $text = get_sub_field('text');
            $link = get_sub_field('link');
  ?>
            <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
              <?php if($iterations == 2): ?>
                <div class="puff second">
              <?php else: ?>
                <div class="puff">
              <?php endif; ?>
              <h3 class="puffHeadline"><?php echo $headline; ?></h3>
              <p class="puffText"><?php echo $text; ?> </p>
              <a href="<?php echo $link; ?>">
                <img class="puffArrow" src="<?php echo get_template_directory_uri() . '/assets/img/arrow.jpg'; ?>">
              </a>
              </div>
            </div>
    <?php endwhile; ?>
  <?php endif; ?>
</div>
<!-- Puffs End -->

---

这是Chrome开发控制台的图像，用于

，这是由于亚像素大小造成的。关于这个话题有很多讨论






如果你想变得更沮丧，在Safari中看看吧。它将309.984px转换为309px（它只是删除小数点），因此您的行实际上是3px太窄了，而不是只有1

换句话说，这是一个特定于浏览器的问题

在您的情况下，最简单的方法是在
行
上设置一个
背景色
，这将为右侧剩余的两个像素着色

HTML（将类添加到行中）

请提供完整的CSS。我们不知道其他元素的值可能存在冲突。添加了这些元素的CSS，但是没有周围的元素，这是行中唯一的元素。否则，你可以现场查看
.puff {
  height:190px;
  background:#85bf61;
  padding:20px 20px 0 20px;
}

.puff.second {
  background:#acd373;
}

.puffHeadline {
  font-size:33px;
  margin-bottom:10px;
  font-weight:400;
}

.puffText {
  font-size:18px;
  font-weight:300;
}

.puffArrow {
  background:url(../img/arrow.jpg);
  position:absolute;
  bottom:0;
  right:0;
}

<div class="row puffs">

.row.puffs {
    background-color: #85bf61;
}