Bootstrap - 使列內的圖像具有相同的高度？

如何讓列內的圖像具有相同的高度？Bootstrap - 使列內的圖像具有相同的高度？

我正在嘗試製作像這樣的網格佈局site。

這是我的嘗試bootsrap。

但我不能做出高度一致的：

代碼：

<div class="container"> 
    <div class="row"> 

     <div class="col-md-3 col-sm-3"> 
      <div class="col-md-12 col-sm-12"><a href="#" class="grid-item"> <img class="img-responsive" src="http://placehold.it/800x1200" alt=""> </a> 
      </div> 
     </div> 

     <div class="col-md-6 col-sm-6"> 
      <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a> 
      </div> 
     </div> 

     <div class="col-md-3 col-sm-3"> 
      <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a> 
      </div> 
      <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a> 
      </div> 
     </div> 

    </div> 

    <div class="row"> 

     <div class="col-md-3 col-sm-3"> 
      <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a> 
      </div> 
      <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a> 
      </div> 
     </div> 

     <div class="col-md-3 col-sm-3"> 
      <div class="col-md-12 col-sm-12"><a href="#" class="grid-item"> <img class="img-responsive" src="http://placehold.it/800x1200" alt=""> </a> 
      </div> 
     </div> 

     <div class="col-md-6 col-sm-6"> 
      <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a> 
      </div> 
     </div> 

    </div> 

    <div class="row"> 

     <div class="col-md-6 col-sm-6"> 
      <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a> 
      </div> 
     </div> 

     <div class="col-md-3 col-sm-3"> 
      <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a> 
      </div> 
      <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a> 
      </div> 
     </div> 

     <div class="col-md-3 col-sm-3"> 
      <div class="col-md-12 col-sm-12"><a href="#" class="grid-item"> <img class="img-responsive" src="http://placehold.it/800x1200" alt=""> </a> 
      </div> 
     </div> 

    </div> 
</div>

有什麼事情，我需要做的像側？如果是這樣，我應該遵守什麼尺寸的圖像？

或者它是我應該在JavaScript端或CSS的東西？

或者我應該使用一個插件？

任何想法？

來源

2017-02-10 laukok

你試過了'.row-eq-height'類的bootstrap嗎？ http://getbootstrap.com.vn/examples/equal-height-columns/正在使用flexbox –

@MihaiT使列具有相同的高度。我尋找使圖像具有相同的高度。 – laukok

也就是說，當你在較小的屏幕上時，'.row-eq-height'會導致一個bug。它強制3列保持不變，即使你在大屏幕和中屏幕上使用col-md-4，也希望這3列在小屏幕上成爲1列。 – laukok

我讓你成爲你如何實現你想要的例子。

是通過使用background-images而不是圖像。所以首先你要將列與高度相等，然後使用與您在.grid-items中放入的圖像相同的背景圖像。並用opacity:0隱藏第一個img;

你需要保持原有的IMGS使得grid-items有物理高度

讓我知道這對你的作品

看到CSS

使用> jsfiddle

代碼

.grid-item { 
    display: block; 
    margin: 0 5px; 
    border: 1px solid red; 
    height:100%; 
} 
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 { 
    padding-left: 0; 
    padding-right: 0; 
} 


.row { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display:   flex; 
    flex-wrap: wrap; 
    margin:10px 0; 
} 
.row > [class*='col-'] { 
    display: flex; 
    flex-direction: column; 

} 
.row > [class*='col-'] > [class*='col-'] { 
    height:100%; 
} 
a.grid-item img { opacity:0} 
a.grid-item { background-size:cover } 

.col-md-3 .col-md-12 + .col-md-12 { 
    margin-top:10px; 
}

HTML

<div class="container"> 
<div class="row"> 

    <div class="col-md-3 col-sm-3"> 
     <div class="col-md-12 col-sm-12"><a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x1200')"> <img class="img-responsive" src="http://placehold.it/800x1200" alt=""> </a> 
     </div> 
    </div> 

    <div class="col-md-6 col-sm-6"> 
     <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a> 
     </div> 
    </div> 

    <div class="col-md-3 col-sm-3"> 
     <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a> 
     </div> 
     <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a> 
     </div> 
    </div> 

</div> 

<div class="row"> 

    <div class="col-md-3 col-sm-3"> 
     <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a> 
     </div> 
     <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a> 
     </div> 
    </div> 

    <div class="col-md-3 col-sm-3"> 
     <div class="col-md-12 col-sm-12"><a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x1200')"> <img class="img-responsive" src="http://placehold.it/800x1200" alt=""> </a> 
     </div> 
    </div> 

    <div class="col-md-6 col-sm-6"> 
     <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a> 
     </div> 
    </div> 

</div> 

<div class="row"> 

    <div class="col-md-6 col-sm-6"> 
     <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a> 
     </div> 
    </div> 

    <div class="col-md-3 col-sm-3"> 
     <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a> 
     </div> 
     <div class="col-md-12 col-sm-12"> <a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x600')"> <img class="img-responsive" src="http://placehold.it/800x600" alt=""> </a> 
     </div> 
    </div> 

    <div class="col-md-3 col-sm-3"> 
     <div class="col-md-12 col-sm-12"><a href="#" class="grid-item" style="background-image:url('http://placehold.it/800x1200')"> <img class="img-responsive" src="http://placehold.it/800x1200" alt=""> </a> 
     </div> 
    </div> 

</div> 
</div>

來源

2017-02-10 08:41:43

謝謝你的回答。但我不明白爲什麼你有這個在CSS'a.grid-item {background：url（「http://placehold.it/800x600」）無重複滾動中心頂部/覆蓋} .col-md- 3 .col-md-12 + .col-md-12 {margin_top：10px; }' – laukok

那麼800x1200和其他800x600的圖片在html上會發生什麼？正如我解釋的那樣， – laukok

。原始的imgs必須留在html中，因爲如果你刪除它們或者在它們上使用'display：none'，'.grid-items'將不會有任何'height'。在他們的幫助下，您可以在行（和列）上設置所需的高度。但是你用「不透明度：0」來隱藏它們，併爲每一列添加不同的背景圖像。在我的例子中，我只添加了一個img作爲背景。但是您需要爲每個列添加背景圖片。這是我能想到的唯一方法，你可以使所有列的高度相等，imgs填充整個列 –

Bootstrap - 使列內的圖像具有相同的高度？

回答

相關問題