試圖讓圖像適合整個列/行使用引導

我試圖讓三個圖像累積佔用整個引導行（實際上每個佔用一個跨越4列）。然而，我現在的代碼讓他們在兩邊和兩邊都留下了空白。我附上了該問題的截圖，並提供了理想的解決方案，讓圖像佔據整個空間而不會留下任何空白。下面是相關的HTML：試圖讓圖像適合整個列/行使用引導

<body> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="col-md-4"> 
       <image class="img-responsive" src="http://res.cloudinary.com/duocsoiqy/image/upload/v1500928572/Waterloo_Image_abjgbc.png" style="max-height:100%;width:100%"> 
      </div> 
      <div class="col-md-4"> 
       <image class="img-responsive" src="http://res.cloudinary.com/duocsoiqy/image/upload/v1500928930/New_York_Image_ke8tya.png" style="max-height:100%;width:100%"> 
      </div> 
      <div class="col-md-4"> 
       <image class="img-responsive" src="http://res.cloudinary.com/duocsoiqy/image/upload/v1500929276/Columbus_Image_t7oren.png" style="max-height:100%;width:100%"> 
      </div> 
     </div> 
    </div> 
</body>

Screenshot of Issue

來源

2017-07-24 paolompmojica

的cols有填充。您可以刪除填充（正確地通過sass或更少），或者您將它們作爲div的背景，或者不使用行/列作爲您的站點 – yBrodsky

的那個默認裝訂線。設置填充爲0 .somenamespace .col-md-4 {padding：0;} – karthick

引導列具有默認權限和15px的左填充。檢查devtools中的列，你會看到它。你需要用自己的自定義CSS來搭配它。

來源

2017-07-24 20:57:36 sn3ll

在這裏，你去了一個解決方案https://jsfiddle.net/hhzbxrbf/

.col-md-4 { 
 
    padding: 0; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<body> 
 
    <div class="container-fluid"> 
 
     <div class="row"> 
 
      <div class="col-md-4"> 
 
       <image class="img-responsive" src="http://res.cloudinary.com/duocsoiqy/image/upload/v1500928572/Waterloo_Image_abjgbc.png" style="max-height:100%;width:100%" /> 
 
      </div> 
 
      <div class="col-md-4"> 
 
       <image class="img-responsive" src="http://res.cloudinary.com/duocsoiqy/image/upload/v1500928930/New_York_Image_ke8tya.png" style="max-height:100%;width:100%" /> 
 
      </div> 
 
      <div class="col-md-4"> 
 
       <image class="img-responsive" src="http://res.cloudinary.com/duocsoiqy/image/upload/v1500929276/Columbus_Image_t7oren.png" style="max-height:100%;width:100%" /> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</body>

來源

2017-07-25 06:08:42 Shiladitya

試圖讓圖像適合整個列/行使用引導

回答

相關問題