ブートストラップの列に置かれたときに画像の前に奇妙な空間があります

Question

3つの画像が4列の行に配置され、それらの間に空白がなくタッチする画像ギャラリーを作成しようとしています。 しかし、そうすることで、各列の各画像の左側に奇妙な空白があります。

はこちらをご覧ください：http://www.bootply.com/IQMBlg5q9L

Answer 1

.no-guttersは、ブートストラップクラスに組み込まれていません。それを使用するには、自分が参照する必要なCSSを追加する必要があります。たとえば：

次のスニペットで

img { max-width: 100%;} 

.row.no-gutters { 
    margin-right: 0; 
    margin-left: 0; 
} 

.row.no-gutters > [class^="col-"], .row.no-gutters > [class*=" col-"] { 
    padding-right: 0; 
    padding-left: 0; 
} 

私はそれがここに表示ウィンドウには崩壊しないだけので、「XS」であなたの「MD」colsのを交換し、画像サイズを縮小：

img { max-width: 100%;} 
 

 
.row.no-gutters { 
 
    margin-right: 0; 
 
    margin-left: 0; 
 
} 
 

 
.row.no-gutters > [class^="col-"], .row.no-gutters > [class*=" col-"] { 
 
    padding-right: 0; 
 
    padding-left: 0; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 

 
<div id="portfolio-main"> 
 
    <div class="container-fluid"> 
 
    <div class="row no-gutters"> 
 
     <div class="col-xs-4"> 
 
     <img src="https://placehold.it/250x150"> 
 
     </div> 
 
     <div class="col-xs-4"> 
 
     <img src="https://placehold.it/250x150"> 
 
     </div> 
 
     <div class="col-xs-4"> 
 
     <img src="https://placehold.it/250x150"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

ブートストラップにスペースを追加するクラスを追加する必要はありません。スペースの問題を取り除くためにクラス行を使用できます

<div id="portfolio-main"> 
       <div class="container-fluid"> 
        <div class="row"> 
         <div class="col-md-4"> 
          <div class="row"> 
          <img class="img-responsive" src="https://placehold.it/350x150"> 
          </div> 
         </div> 
         <div class="col-md-4"> 
         <div class="row"> 
          <img class="img-responsive" src="https://placehold.it/350x150"> 
           </div> 
         </div> 
         <div class="col-md-4"> 
          <div class="row"> 
          <img class="img-responsive" src="https://placehold.it/350x150"> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div>