填充引导缩略图

Question

我在引导程序中使用缩略图。我已经能够根据我的喜好在侧面纠正填充，但不能低于它。这在移动设备上是个大问题，因为它太宽了，我不喜欢。

代码：

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

Answer 1

仅在大屏幕上使用 CSS 中的 @media 效果：

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

例如992px，可以使用你喜欢的尺寸

Answer 2

答案是marginsnotpadding。但是问题出在缩略图类中：

.thumbnail {
margin-bottom: 5px;

}

Answer 3

我认为当你想要元素外的空间时，你应该考虑margins 而不是padding。所以我建议添加CSS属性margin-bottom:5px，将属性添加到CSS类中。

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

如果这不起作用，那么某些其他 CSS 类必须覆盖边距底部。那么请将类修改为。

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

我无法在我的引导程序 sn-p 中复制您的问题，这可能是由于其他一些 CSS 类。

下面是一个演示margin-bottom的sn-p。

---

.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是weird 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>

---