我试图将Bootstrap行中存在的4个div垂直居中。 这是我的基本代码:
<div class="row">
<div class="col-md-3"><button type="button" style="float:right; height: 40px;">Contact</button></div>
<div class="col-md-3">Activity 1</div>
<div class="col-md-3">Activity 2</div>
<div class="col-md-3">Activity 3</div>
</div>
所以,我不能使用Flexbox,因为我需要在中间屏幕上保持行右侧的按钮而 justify-self:flex-end 不足以使按钮保持打开状态排的权利。我也不能用代码末尾的按钮移动行,因为我需要先将它保留在移动设备中。 我还尝试使用 display:table 和 display:table-cell ,但它仍无效。
有人有想法吗?
答案 0 :(得分:1)
你可以使用flexbox并利用order
属性将第一个按钮推到行的右侧,然后 flexbox可以将内容集中在一起每个div。
在移动设备尺寸下,您可以使用媒体查询覆盖订单属性。
.row {
display: flex;
}
.col-md-3 {
display: flex;
align-items:center; /* vertical center */
}
.last {
order:2;
}
&#13;
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-3 last"><button type="button">Contact</button></div>
<div class="col-md-3">Activity 1</div>
<div class="col-md-3">Activity 2</div>
<div class="col-md-3">Activity 3</div>
</div>
</div>
&#13;
答案 1 :(得分:0)
尝试将行显示为flex,删除按钮右侧的浮动。
最简单的方法是使用justify-content: space-between;
并在</row>
之前设置按钮。
然后,使用align-items: center
。
答案 2 :(得分:-1)
尝试指定类,如下所示,这有助于您的解决方案。
.col-md-3 ~ .col-md-3
{display:table-cell;}