奇怪的空間之前，圖像放置在引導列

我試圖創建一個圖像庫，其中三個圖像放置在每行4列，使他們之間沒有空白區，他們觸摸。但是在這樣做的時候，每列中每個圖像左側都有一些奇怪的空白。奇怪的空間之前，圖像放置在引導列

到這裏看看：http://www.bootply.com/IQMBlg5q9L

2017-05-06 Parker Queen

請嘗試此代碼此代碼將完美工作，無需添加任何額外的類比bootstrap。第二個答案 –

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

在下面的代碼片段我換成你「MD」的cols以「XS」，降低了圖像的大小，只需所以它不會在視窗這裏崩潰：

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>

來源

2017-05-06 10:26:01 mayersdesign

但是，即使容器是流體，第一個圖像的左側仍然有那麼小的空白區域，而第二個圖像的右側仍然有空白區域。我該如何解決這個問題？ –

添加..container-fluid {padding：0px！important}會這樣做。儘管您可能也想簡單地移除容器。 – mayersdesign

嘿，你能告訴我爲什麼會發生？我認爲容器流體橫跨整個可用寬度！情況不是這樣嗎？ –

沒有必要在bootstrap中爲空間問題添加額外的類。爲了消除間距問題，您可以使用類行

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

來源

2017-05-06 10:42:28

奇怪的空間之前，圖像放置在引導列

回答

相關問題