填充Bootstrap缩略图

Question

我正在使用Bootstrap中的缩略图(Thumbnails)。我已经成功地调整了两侧的填充(padding)，但是下面的填充还没有达到我想要的效果。在移动设备上，这是一个很大的问题，因为它太宽了。

代码:

<div class="col-5-gutter">
<div class="col-md-4">
<div class="thumbnail"><img src="images/Thumbnail_Placeholder.png" alt="Thumbnail Image 1">
<div class="caption">
<h3>Text</h3>
<p>Text.</p>      
</div>
</div>
</div>
<div class="col-5-gutter">
<div class="col-md-4">
<div class="thumbnail"><img src="images/Thumbnail_Placeholder.png" alt="Thumbnail Image 1">
<div class="caption">
<h3>Text Here</h3>
<p>Text Here</p>
</div>
</div>
</div>
</div>

CSS：

.col-5-gutter > [class*='col-'] {
    padding-right:5px;
    padding-left:5px;
    padding-bottom: 5px;
}

- Phil

---

你能再解释一下问题吗？你遇到的确切问题是什么？ - Naren Murali

所以我能够通过将左右列的填充减少到5px来纠正它，但是底部有大量填充。以下是一些屏幕截图：桌面：https://www.screencast.com/t/zGvPFzFlDH 移动设备：https://www.screencast.com/t/2qM59NH6ygWF有什么方法可以减少那个厚重的黑色填充吗？padding-bottom和margin-bottom似乎无法解决这个问题。 - Phil

但是实际问题是什么？ - Naren Murali

抱歉，请看我上面编辑过的评论。 - Phil

Answer 1

答案是 margins 而不是 padding。然而问题出在缩略图类中：

.thumbnail {
margin-bottom: 5px;

}

- Phil

Answer 2

仅在大屏幕上使用@media来实现效果，这与CSS有关：

@media ( min-width : 992px) {
     .col-5-gutter > [class*='col-'] {
        padding-right:5px;
        padding-left:5px;
        padding-bottom: 5px;
    }
}

992像素是一个例子，你可以使用你喜欢的尺寸。

- farshad noruzi

---

底部仍有相同数量的填充，参见截图：https://www.screencast.com/t/zGvPFzFlDH - Phil

这是为缩略图类添加的填充，它有20像素的填充。 - farshad noruzi

Answer 3

我认为当你想要在元素外部添加空间时，应该考虑使用margins而不是padding。因此，我建议添加CSS属性margin-bottom:5px，并将该属性添加到CSS类中，如下所示。

.col-5-gutter > [class*='col-'] {
    padding-right:5px;
    padding-left:5px;
    margin-bottom: 5px;
}

如果这不起作用，那么可能是其他 CSS 类覆盖了 margin-bottom。请修改该类。

.col-5-gutter > [class*='col-'] {
    padding-right:5px;
    padding-left:5px;
    margin-bottom: 5px !important;
}

我无法在我的Bootstrap代码片段中复制您的问题，可能是由于其他CSS类的原因。

以下是演示margin-bottom的代码片段。

---

.col-5-gutter div[class*='col-'] {
  padding-right: 5px;
  padding-left: 5px;
  margin-bottom: 5px !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="col-5-gutter">
  <div class="col-md-4">
    <div class="thumbnail"><img src="http://via.placeholder.com/150x150" alt="Thumbnail Image 1">
      <div class="caption">
        <h3>Text</h3>
        <p>Text.</p>
      </div>
    </div>
  </div>
  <div class="col-5-gutter">
    <div class="col-md-4">
      <div class="thumbnail"><img src="http://via.placeholder.com/150x150" alt="Thumbnail Image 1">
        <div class="caption">
          <h3>Text Here</h3>
          <p>Text Here</p>
        </div>
      </div>
    </div>
  </div>

---

我也发现HTML代码有点奇怪。如果HTML布局不正确，请忽略此部分。

---

.col-5-gutter div[class*='col-'] {
  padding-right: 5px;
  padding-left: 5px;
  margin-bottom: 5px !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="col-5-gutter">
  <div class="col-md-4">
    <div class="thumbnail"><img src="http://via.placeholder.com/150x150" alt="Thumbnail Image 1">
      <div class="caption">
        <h3>Text</h3>
        <p>Text.</p>
      </div>
    </div>
  </div>
</div>
<div class="col-5-gutter">
  <div class="col-md-4">
    <div class="thumbnail"><img src="http://via.placeholder.com/150x150" alt="Thumbnail Image 1">
      <div class="caption">
        <h3>Text Here</h3>
        <p>Text Here</p>
      </div>
    </div>
  </div>

---

- Naren Murali

---

你是对的，和下面的人一样。应该是“margins”，但也要在缩略图类中修改。 - Phil

没问题 - 谢谢！是的，HTML代码有点奇怪，只是我在Stackoverflow上发布时的格式问题，除此之外和你的一样。 - Phil

@Phil 不客气，如果问题已经解决，你可以关闭这个答案！ - Naren Murali