Question

我有一行有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

Answer 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>

Answer 2

这可能是因为.row类在边上增加了一些余量。

试试这个：

.row {
   margin: 0;
 }

Answer 3

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

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

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

使用bootstrap col时，图像左右各处有空白区域

3 个答案: