我正在使用 Bootstrap 3 模态实现 Angular 色权限分配屏幕。 Please, see a demo of current state在全屏中,所以选择不会堆叠在彼此之下,而是对齐到一边。如您所见,现在按钮贴在顶部,但我想将它们放在模态中心的一个列中:
代码很简单,check plunkr详情:
<div class="modal-header">
<h3 class="modal-title">Role permissions</h3>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-5 form-group">
<label for="availablePermission">
Available permissions
</label>
<select id="availablePermission" class="form-control" size="14">
<optgroup label="General">
<option value="0">Change password</option>
...
</optgroup>
</select>
</div>
<div class="col-md-2">
<button class="btn btn-primary">
<i class="fa fa-fw fa-angle-right"></i>
</button>
<button class="btn btn-primary">
<i class="fa fa-fw fa-angle-left"></i>
</button>
</div>
<div class="col-md-5 form-group">
<label for="existingPermission">
Assigned permissions
</label>
<select id="existingPermission" class="form-control" size="14">
<optgroup label="General">
<option value="1">View users</option>
...
</optgroup>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary">OK</button>
<button class="btn btn-warning">Cancel</button>
</div>
我已经尝试使用 display: flex
和 flex-direction: column
将 flexbox 用于中间列,但按钮没有移动一个像素。 display: table-cell
和 vertical-align: middle
也不起作用。是否可以在不使用硬编码维度的情况下将它们漂亮地集中?
最佳答案
设法让它与 flexbox 一起工作,虽然失去了一点适应性:尝试改变宽度 - 现在选择不会垂直堆叠 :( 添加一个 @media
查询(类似于 Bootstrap 的 *-md
查询)将解决此问题。
@media (min-width: 992px) {
.flex-row {
display: flex;
}
}
.flex-col {
display: flex;
flex-wrap: wrap;
align-items: center;
align-content: center;
justify-content: center;
}
关于css - 在 Bootstrap 3 中的两个堆叠选择之间垂直对齐一组按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26068762/