使用 bootstrap col 时图像周围的左右空白答案

【问题标题】：White space left and right around images when using bootstrap col使用 bootstrap col 时图像周围的左右空白
【发布时间】：2016-06-18 18:10:52
【问题描述】：

我有一排有 3 张图片。
左图左侧有空白区域。
右图右侧有空白区域。

我该如何解决这个问题，这样我的左右两侧就没有空间了？

请参阅下面的代码：

图像中的背景是橙色的，因此更容易看到。

HTML：

<div class="container section">
  <div class="row">
    <div class="col-md-offset-1 col-md-10 featured">

      <div class="col-md-4 img-featured-1">
        <%= image_tag("featured-1.jpeg", class: "img-responsive") %>
      </div>
      <div class="col-md-4 img-featured-2">
        <%= image_tag("featured-2.jpeg", class: "img-responsive") %>
      </div>
      <div class="col-md-4 img-featured-3">
        <%= image_tag("featured-3.jpeg", class: "img-responsive") %>
      </div>

    </div>
  </div>
</div>

CSS：

.featured {
  background-color: orange;
}
.img-featured-1 {
  width: 33.33333%;
  float: left;
}
.img-featured-2 {
  width: 33.33333%;
}
.img-featured-3 {
  width: 33.33333%;
  float: right;
}

See the image

【问题讨论】：

另外，大部分 CSS 不是必需的。您将宽度声明为 33.3333%，尽管引导类“.col-md-4”已经设置了它。并且浮动也不应该是必需的，它们应该以任何一种方式一个接一个地定位。
为什么你使用 'col-md-offset-1 col-md-10' 类来 'featured'。它还最小化了空间。而是尝试“col-md-12”

标签： html css ruby-on-rails twitter-bootstrap

【解决方案1】：

试试这个：

.featured {
  background-color: orange;
}

 .nopadding {
  padding:15px 0px;}

<div class="container section">
  <div class="row">
    <div class="col-md-offset-1 col-md-10 nopadding">

      <div class="col-md-4 img-featured-1">
        <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">
      </div>
      <div class="col-md-4 img-featured-2">
        <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">
      </div>
      <div class="col-md-4 img-featured-3">
        <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">
      </div>

    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

这可能是因为 .row 类在侧面添加了一些边距。

试试这个：

.row {
   margin: 0;
 }

【讨论】：

【解决方案3】：

几件事，首先是你的样式表。它应该是 .img-featured-1（点定义此样式适用于给定名称的类）。

接下来，如果还没有解决，请检查您的主题样式表和/或使用 { margin: 0 !important; 覆盖边距和填充。填充：0！重要； }

最后，确保您的图片本身没有白色/透明空间。

【讨论】：