パディングブートストラップサムネイル

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

答えはmarginspaddingませんでした。しかし問題は、サムネイルクラスにいた：

.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

私はあなたのことを考えます要素の外側にスペースが必要な場合は、paddingの代わりにmarginsを考えてください。だから私は、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が（間違っている場合は、このセクションを無視してください）HTMLのレイアウトはすべて、このようにする必要があり weirdであることがわかります。

---

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

---