填充 Bootstrap 个缩略图

Question

我在 bootstrap 中使用缩略图。我已经能够根据自己的喜好在两侧更正填充，但不能在其下方。这在移动设备上是个大问题，因为它对我来说太宽了。

代码：

<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

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

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

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

Answer 2

我认为当您希望 space 位于元素外部时，您应该考虑 margins 而不是 padding。所以我建议添加 CSS 属性 margin-bottom:5px，将属性添加到 CSS class 之类的

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

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

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

我无法在我的 bootstrap 片段中复制您的问题，这可能是由于其他 CSS class.

下面是演示 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是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>

Answer 3

答案是margins不是padding。然而问题出在缩略图 class:

.thumbnail {
margin-bottom: 5px;

}

填充 Bootstrap 个缩略图

Padding Bootstrap Thumbnails

html

css

thumbnails

twitter-bootstrap