Bootstrap 4 img響應在一行

我試圖添加一行到我的引導站點與四個圖像大小通過img響應屬性。我想要有以下外觀：「桌面4列，平板2列和移動1列」爲此，我使用「col-md-3 col-sm-6 col-xs-12」「我在這裏找到了stackoverflow。Bootstrap 4 img響應在一行

我的代碼如下所示：

<div class="container download" id="downloads"> 
    <h2>Downloads</h2> 
    <p class="lead">Some Text.....</p> 
    <div class="row"> 
     <div class="col-md-3 col-sm-6 col-xs-12"> 
     <a href="LinkT"> 
      <img style="width: 20%; height: 20%" alt="AltText" src="LinkToImage" class="img-responsive"> 
     </a> 
     </div> 

     <div class="col-md-3 col-sm-6 col-xs-12"> 
     <a href="LinkToImage"> 
      <img style="width: 20%; height: 20%" alt="AltText" src="LinkToImage" class="img-responsive"> 
     </a> 
     </div> 

     <div class="col-md-3 col-sm-6 col-xs-12"> 
     <a href="LinkToImage"> 
      <img style="width: 20%; height: 20%" alt="AltText" class="img-responsive"> 
     </a> 
     </div> 

     <div class="col-md-3 col-sm-6 col-xs-12"> 
     <a href="LinkToImage"> 
      <img style="width: 20%; height: 20%" alt="AltText" src="LinkToImage" class="img-responsive"> 
     </a> 
     </div> 
    </div> 
    </div>

我試了幾個山坳類，但沒有工作。如果我檢查與螢火蟲，螢火蟲表演的現場，每一個山坳DIV類使用的首頁的整個寬度和圖像顯示在一行:(

謝謝您的幫助

來源

2017-09-20 user2738829

這將是有益的通知如果你可以做一個有效的小演示，那麼我們可以看到它發生。你的代碼看起來沒問題，我唯一能想到的就是你的內聯寬度和高度樣式。他們會寫出img-responsive類風格，這很可能會造成一個問題，這取決於圖像的尺寸.. – sn3ll

看着你代碼中，行/列部分似乎沒問題...但是，您使用內聯樣式來設置圖像的大小，這將覆蓋.responsive-img類，並且很難將圖像放大。如果您沒有看到柱子按預期工作，確保你正確的包括bootstrap css，並且你正在使用相對於類名稱的正確引導版本。.responsive-img是一個Bootstrap 3類。如果你使用的是Bootstrap 4，你將需要使用.img-fluid

我有一個工作的例子，看起來像這樣：

<div class="container download" id="downloads"> 
    <h2>Downloads</h2> 
    <p class="lead">Some Text.....</p> 
    <div class="row"> 
     <div class="col-md-3 col-sm-6 col-xs-12"> 
     <a href="LinkT"> 
      <img alt="AltText" src="https://placehold.it/300" class="img-responsive"> 
     </a> 
     </div> 

     <div class="col-md-3 col-sm-6 col-xs-12"> 
     <a href="LinkToImage"> 
      <img alt="AltText" src="https://placehold.it/300" class="img-responsive"> 
     </a> 
     </div> 

     <div class="col-md-3 col-sm-6 col-xs-12"> 
     <a href="LinkToImage"> 
      <img src="https://placehold.it/300" alt="AltText" class="img-responsive"> 
     </a> 
     </div> 

     <div class="col-md-3 col-sm-6 col-xs-12"> 
     <a href="LinkToImage"> 
      <img alt="AltText" src="https://placehold.it/300" class="img-responsive"> 
     </a> 
     </div> 
    </div> 
</div>

在這裏看到：https://codepen.io/kball/pen/RLaXqR

對於引導4例子中看到：https://codepen.io/kball/pen/aLZozo

來源

2017-09-20 16:31:05 kball

BS4使用img-fluid替代img響應 – mlegg

好點 - 我將添加一個BS4示例並作爲第二個選項更新 – kball