2016-08-04 12 views
1

サムネイルのグリッドの行間の垂直スペースを削除しようとしています。bootstrapサムネイルのグリッドの行から垂直スペースを削除します。

.gutter-0.row { 
    margin-right: 0; 
    margin-left: 0; 
    /* not working */ 
    margin-top: 0; 
    margin-bottom: 0; 
} 
.gutter-0 > [class^="col-"], .gutter-0 > [class^=" col-"] { 
    padding-right: 0; 
    padding-left: 0; 
    /* not working */ 
    padding-top: 0; 
    padding-bottom: 0; 
} 

HTML

<div class="row gutter-0"> 
     <div class="col-md-4"> 
      <div class="thumbnail"> 
       <img src="http://placehold.it/200x200" alt=""> 
      </div> 
     </div> 
     <div class="col-md-4"> 
      <div class="thumbnail"> 
       <img src="http://placehold.it/200x200" alt=""> 
      </div> 
     </div> 
     <div class="col-md-4"> 
      <div class="thumbnail"> 
       <img src="http://placehold.it/200x200" alt=""> 
      </div> 
     </div> 
    </div> 
    <div class="row gutter-0"> 
     <div class="col-md-4"> 
      <div class="thumbnail"> 
       <img src="http://placehold.it/200x200" alt=""> 
      </div> 
     </div> 
     <div class="col-md-4 col-sm-4"> 
      <div class="thumbnail"> 
       <img src="http://placehold.it/200x200" alt=""> 
      </div> 
     </div> 
     <div class="col-md-4 col-sm-4"> 
      <div class="thumbnail"> 
       <img src="http://placehold.it/200x200" alt=""> 
      </div> 
     </div> 

    </div> 

Bootply

私はどのように行うのでしょうか? ありがとうございました

答えて

2

「サムネイル」クラスに余白があります。

ちょうどそれを削除するには、あなたのCSSに以下を追加:

.thumbnail { 
    margin-bottom: 0; 
} 

Bootply

+0

パーフェクト!ありがとうございました! –

2

.thumbnailは20ピクセル下マージンを持っています。リセットするか、以下のスタイルを使用してください。

.thumbnail{ 
    display: table-cell; 
} 

http://www.bootply.com/hDnBumWAdZ

+0

あなたの解決策もOKです。ありがとう –

関連する問題