使用bootstrap col時圖像周圍左右空白

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;
}

看圖片

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！重要; }

最后，請確保您的圖像本身沒有白色/透明空間。