Bootstrap 3 个等高缩略图(如 bootstrap 4 中的等高卡片)
Bootstrap 3 equal height thumbnails (like equal height cards in bootstrap 4)
我有一排这样的缩略图:
不过我希望它们的高度相同。这是我的代码:
<div class="row text-center">
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<div class="caption">
<h3>HOTKEY + COMBO</h3>
<p>Hotkey description goes here. Category only shown in explore.</p>
<p>
<a href="#" class="btn btn-default" data-tooltip="Change Hotkey">
</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<div class="caption">
<h3>HOTKEY + COMBO</h3>
<p>short desc</p>
<p>
<a href="#" class="btn btn-default" data-tooltip="Change Hotkey">
</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 hotkey-add">
<div class="thumbnail">
<div class="caption">
<p></p>
<p><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-plus"></span></a></p>
</div>
</div>
</div>
</div>
这可能吗?就像我们在 bootstrap4 中看到的一样,这里是等高卡片:
http://www.codeply.com/render/KrUO8QpyXP#
似乎 bootstrap 4,就像您在示例中显示的那样,用于获得相同的高度,display: table
用于容器 div 和 display: table-cell
用于内在的。
其他解决方案可以使用 <table>
代替 <div>
,使用 flex
属性...
看看这个 How can I make Bootstrap columns all the same height?
我知道我在这方面有点晚了,但我认为最好的方法是 flexbox。以下是它在 Bootstrap 3:
中的工作方式
.row.display-flex {
display: flex;
flex-wrap: wrap;
}
.thumbnail {
height: 100%;
}
只需将 display-flex
添加到 row
。此外,即将推出的 Bootstrap 4 将 flexbox 作为默认设置,因此将来不需要这个额外的 CSS。
您还可以使用 position of child elements 做更多事情。
我有一排这样的缩略图:
不过我希望它们的高度相同。这是我的代码:
<div class="row text-center">
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<div class="caption">
<h3>HOTKEY + COMBO</h3>
<p>Hotkey description goes here. Category only shown in explore.</p>
<p>
<a href="#" class="btn btn-default" data-tooltip="Change Hotkey">
</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<div class="caption">
<h3>HOTKEY + COMBO</h3>
<p>short desc</p>
<p>
<a href="#" class="btn btn-default" data-tooltip="Change Hotkey">
</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 hotkey-add">
<div class="thumbnail">
<div class="caption">
<p></p>
<p><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-plus"></span></a></p>
</div>
</div>
</div>
</div>
这可能吗?就像我们在 bootstrap4 中看到的一样,这里是等高卡片:
http://www.codeply.com/render/KrUO8QpyXP#
似乎 bootstrap 4,就像您在示例中显示的那样,用于获得相同的高度,display: table
用于容器 div 和 display: table-cell
用于内在的。
其他解决方案可以使用 <table>
代替 <div>
,使用 flex
属性...
看看这个 How can I make Bootstrap columns all the same height?
我知道我在这方面有点晚了,但我认为最好的方法是 flexbox。以下是它在 Bootstrap 3:
中的工作方式.row.display-flex {
display: flex;
flex-wrap: wrap;
}
.thumbnail {
height: 100%;
}
只需将 display-flex
添加到 row
。此外,即将推出的 Bootstrap 4 将 flexbox 作为默认设置,因此将来不需要这个额外的 CSS。
您还可以使用 position of child elements 做更多事情。