我正在尝试使用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”列的高度不同。
如何让它们适应行的高度,以便所有内容都符合要求?
感谢。
答案 0 :(得分:0)
您可以使用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;
}