[英]How can I make Bootstrap thumbnail images the same height so that the thumbnail panels align?
[英]How can I align Bootstrap Columns vertically so that they are the same height?
我正在嘗試使用Bootstrap作為框架來創建一個包含多個圖像和列內容的網站。
是否有可能使所有列自動調整為行的高度? 這是我的代碼:
<div class="row">
<div class="col-md-6 col-xs-12">
<img src="images/main.jpg" class="img-responsive" alt="" />
<div class="slogan">
<h1>WEBSITE TITLE.<br />SLOGAN.</h1>
</div>
</div>
<div class="col-md-3 col-xs-6">
<div class="box content">
<h3>Services and Pricing</h3>
<br />
<a href="#" title="" class="btn btn-custom">READ MORE</a>
</div>
<img src="images/1.jpg" class="img-responsive" alt="" />
</div>
<div class="col-md-3 col-xs-6">
<img src="images/2.jpg" class="img-responsive" alt="" />
<div class="box content">
<h3>Student Discount</h3>
<br />
<a href="#" title="" class="btn btn-custom">LEARN MORE</a>
</div>
</div>
</div>
在上面的示例中,兩個“ col-md-3 col-xs-6”列與“ col-md-6 col-xs-12”列的高度不同。
如何使它們適應行的高度,以便所有內容對齊?
謝謝。
您可以使用css flexbox為所有列實現相同的高度。 因此您的代碼將是:
<div class="row heightadjust">
<div class="col-md-6 col-xs-12">
<img src="images/main.jpg" class="img-responsive" alt="" />
<div class="slogan">
<h1>WEBSITE TITLE.<br />SLOGAN.</h1>
</div>
</div>
<div class="col-md-3 col-xs-6">
<div class="box content">
<h3>Services and Pricing</h3>
<br />
<a href="#" title="" class="btn btn-custom">READ MORE</a>
</div>
<img src="images/1.jpg" class="img-responsive" alt="" />
</div>
<div class="col-md-3 col-xs-6">
<img src="images/2.jpg" class="img-responsive" alt="" />
<div class="box content">
<h3>Student Discount</h3>
<br />
<a href="#" title="" class="btn btn-custom">LEARN MORE</a>
</div>
</div>
</div>
並編寫一個自定義的CSS
.heightadjust {
display: flex;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.