填充引导缩略图

Posted 2023-03-29

【中文标题】填充引导缩略图

【英文标题】：Padding Bootstrap Thumbnails

【发布时间】：2018-03-18 23:16:49

【问题描述】：

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

代码：

<div class="col-5-gutter">
<div class="col-md-4">
<div class="thumbnail"><img src="images/Thumbnail_Placeholder.png" >
<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" >
<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;

【问题讨论】：

你能再解释一下这个问题吗！您面临的具体问题是什么？

所以我能够通过将列的左侧和右侧的填充减少到 5px 来纠正它，但是底部有很大的填充。以下是一些屏幕截图： 桌面：screencast.com/t/zGvPFzFlDH 手机：screencast.com/t/2qM59NH6ygWF 无论如何我可以减少厚厚的黑色填充？ padding-bottom 和 margin-bottom 似乎没有这样做。

但真正的问题是什么？？

抱歉看到我在上面编辑的评论。

【参考方案1】：

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

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

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

【讨论】：

底部仍然有相同数量的填充，见截图：screencast.com/t/zGvPFzFlDH

缩略图类的内边距，有 20px 内边距

【参考方案2】：

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

.thumbnail 
margin-bottom: 5px;

【参考方案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" >
      <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" >
        <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" >
      <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" >
      <div class="caption">
        <h3>Text Here</h3>
        <p>Text Here</p>
      </div>
    </div>
  </div>

---

【讨论】：

你是对的，还有下面的其他人。它应该是“边距”，但也应该在缩略图类中。

是-谢谢！是的，HTML 很奇怪，就像我在 *** 上发布的那样，其他方面和你的一样。

@Phil 不客气，如果问题解决了，您可以关闭此答案！