Question

我的Bootstrap网格系统有问题。我有三列，每个col-XX-4和每隔一个像素，我用这三个元素重新调整窗口，比小于100％的可用宽度（在这种情况下为930px）小一个像素。这是令人不安的原因是因为上面的元素是一个Bootstrap旋转木马，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 -->

这是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="col-xx-4></div>元素

的Chrome开发者控制台的图片

Chrome dev tools

所以，这里的数学是正确的，310px乘以3等于930px，但这里的问题是每隔2＆＃34;像素＆＃34;调整浏览器大小，每个元素的宽度等于309.984px。

实时预览：http://rbmedia.se/gfx/avesina/

我希望我事先明白了，谢谢！

Answer 1

这是由于子像素大小调整。关于这个主题有很多讨论。

如果你想更加沮丧，请在Safari中查看。它将309.984px转换为309px（它只是丢弃小数），因此你的行实际上是3px太窄而不是只有1。

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

在您的情况下，最简单的方法是在background-color上设置一个.row，它会为右边的剩余几个像素着色。

HTML（在行中添加一个类）

<div class="row puffs">

CSS（将行匹配为3 col的最后一行）

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

Bootstrap网格3项，每项占33％

1 个答案: