对齐按钮左侧,中间,右侧
问题描述:
我正在使用Bootstrap 4测试版。我希望工作流程导航部分中的按钮与左侧的后退按钮对齐,两个取消按钮居中,下一个按钮位于右侧。对齐按钮左侧,中间,右侧
下面是我编写它:
<button type="button" class="btn btn-secondary float-left">Back</button>
<div class="text-center">
<button type="button" class="btn btn-danger">Cancel</button>
<button type="button" class="btn btn-secondary"">Save and Exit</button>
</div>
<button type="submit" class="btn btn-primary float-right">Next</button>
这已经正确定位左边的按钮和中心按钮,但右手按钮低于右边的其他按钮。
我试过把正确的按钮放在它自己的div中,并删除浮左。我怎样才能让他们连续排列?
答
使用的柔性而不是浮动:
<div class="d-flex justify-content-between">
<button type="button" class="btn btn-secondary">Back</button>
<div>
<button type="button" class="btn btn-danger">Cancel</button>
<button type="button" class="btn btn-secondary">Save and Exit</button>
</div>
<button type="submit" class="btn btn-primary">Next</button>
</div>