填充引导程序缩略图

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

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

.thumbnail { 
margin-bottom: 5px; 

}

Answer 2

在CSS只在大屏幕上使用@media效果：

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

992px是，例如，可以使用您喜欢大小

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

我无法复制您的问题在我的引导程序片段中，这可能是由于其他一些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是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>

---