bootstrap两端对齐排列的按钮组

最新推荐文章于 2021-12-28 14:04:05 发布

原创最新推荐文章于 2021-12-28 14:04:05 发布 · 2.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #按钮组 #两端对齐

web 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一种使用HTML和CSS实现按钮组等宽布局的方法，适用于需要将一组按钮拉长为相同尺寸并填满父元素宽度的情况。文章通过具体代码示例展示了如何设置按钮样式以确保即使在按钮文本长度不一的情况下，所有按钮也能保持相同的宽度。

让一组按钮拉长为相同的尺寸，填满父元素的宽度。对于按钮组中的按钮式下拉菜单也同样适用。

效果图：

代码：

<div class="btn-group btn-group-justified" role="group" aria-label="...">

<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Left</button>
</div>

<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Middle</button>
</div>

<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Right</button>
</div>
</div>