填充引導程序縮略圖

我在引導程序中使用縮略圖。我已經能夠根據自己的喜好修正填充，但不能放在下面。這是手機上的一個大問題，因爲它太寬了，我不喜歡。填充引導程序縮略圖

代碼：

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

來源

2017-10-07 Phil

你能解釋這個問題有點多！你面臨的確切問題是什麼？ –

所以我能夠修正列的左側和右側的填充，減少到5px，但底部有大填充。下面是一些屏幕截圖：桌面：https://www.screencast.com/t/zGvPFzFlDH 手機：https://www.screencast.com/t/2qM59NH6ygWF 無論如何，我可以減少厚厚的黑色填充？填充底部和邊緣底部似乎不這樣做。 – Phil

但是實際問題是什麼？ –

答案是margins不padding。然而，問題是在縮略圖類：

.thumbnail { 
margin-bottom: 5px;

}

來源

2017-10-07 08:32:02 Phil

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

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

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

來源

2017-10-07 08:00:39

底部仍有相同數量的填充，請參閱屏幕截圖：https://www.screencast.com/t/zGvPFzFlDH – Phil

此填充用於縮略圖類，此填充爲20px填充 –

我認爲你應該考慮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>

來源

2017-10-07 08:13:44

您是對的，與其他人一起下面。它應該是'邊緣'，但也在縮略圖類。 – Phil

@Phil你的問題是否完全解決！ –

這是 - 謝謝你！是的，這個HTML很奇怪，就像我把它發佈到Stackoverflow上一樣，它就像你的一樣。 – Phil

填充引導程序縮略圖

回答

相關問題