Bootstrap两端对齐的按钮组

两端对齐的按钮组

Bootstrap3两端对齐的按钮组可以将一组按钮拉长为相同的尺寸，并让整个按钮组填满父元素的宽度。对于按钮组中的按钮式下拉菜单也同样适用。

如果按钮组中的按钮是 <a>元素，只需为按钮组的容器追加 .btn-group-justified类即可。简单的讲，就是把一系列.btn元素放入一个.btn-group.btn-group-justified的容器中。如：

<div class="btn-group btn-group-justified" role="group">
<a href="#" class="btn btn-default" role="button">Left</a>
<a href="#" class="btn btn-default" role="button">Middle</a>
<div class="btn-group" role="group">
<a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>

效果如图 3‑20所示：

图3-20 使用 a 元素的按钮组

如果按钮组中的按钮是<button>元素，则必须将每个按钮都放到一个按钮组中，再把这一系列按钮组统统放到一个.btn-group.btn-group-justified的容器中。如：

<div class="btn-group btn-group-justified">
<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>

效果如图 3‑21所示：

图3-21 使用 button 元素的按钮组

注意：由于对两端对齐的按钮组使用了特定的 HTML 和 CSS（即display: table-cell），两个按钮之间的边框叠加在了一起。在普通的按钮组中，设置margin-left: -1px可以将边框重叠，而没有删除任何一个按钮的边框。然而，margin属性对display: table-cell不起作用。因此，你可以根据实际情况，删除边框或重新设置按钮的边框颜色。

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。

Bootstrap两端对齐的按钮组相关推荐

PPT中两端对齐的按钮
PPT的工具栏中常常只有左对齐.中对齐.右对齐和分散对齐的按钮,而没有两端对齐的按钮.要使用两端对齐可以通过菜单栏选择格式--对齐方式--两端对齐.也可以把两端对齐的按钮显示在工具栏上直接点击使用.要 ...
Bootstrap 两端对齐的导航
两端对齐的导航为标签页导航或胶囊式导航组件添加.nav-justified类,可以实现两端对齐的导航.在大于 768px 的屏幕上,导航将填满父元素的宽度,而且菜单项可以像表格的单元格一样自适应宽度 ...
bootstrap中怎么样使按钮居中
总结一下以下几种方法: 在bs中表现按钮的方法有两种: 1.关于 <a> 元素只须将一系列 .btn 元素包裹到 .btn-group.btn-group-justified 中即可. ...
Bootstrap 按钮组
按钮组允许多个按钮被堆叠在同一行上.当你想要把按钮对齐在一起时,这就显得非常有用.您可以通过 Bootstrap 按钮(Button) 插件添加可选的 JavaScript 单选框和复选框样式行为. ...
【Bootstrap】前端美化—Bootstrap实现按钮组分散对齐
一.美化代码与图示 1.1 美化前 1.2 美化后 1.3 代码 <div class="row justify-content-between"> <div c ...
Bootstrap组件——【按钮（预定义样式类、边框颜色、大小、激活和禁用状态、按钮标签）、按钮组（定义按钮组、工具栏按钮组、大小、嵌套按钮、垂直排列）、下拉菜单（定义下拉菜单、下拉菜单样式）】
一.按钮按钮是网页中不可缺少的一种组件,例如页面中搜索.注册等按钮.按钮还广泛应用于表单.下拉菜单.模态框等场景中. 1.预定义样式类 Bootstrap提供了btn来定义按钮,btn ...
吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：按钮组
<!DOCTYPE html> <html> <head><meta charset="utf-8"> <title>B ...
Bootstrap组件_按钮组
按钮组通过按钮组容器把一组按钮放在同一行里.通过与按钮插件联合使用,可以设置为单选框或多选框的样式和行为.<!DOCTYPE html> <html lang="en&qu ...
Bootstrap禁用某个按钮组
禁用某个按钮组某些特殊情况下,可能需要垂直分组的按钮效果.这也很简单,只需把 .btn-group类换成.btn-group-vertical类,就可以让按钮组中的按钮堆叠排列.堆叠排列的按钮组中, ...

Bootstrap两端对齐的按钮组

两端对齐的按钮组

Bootstrap两端对齐的按钮组相关推荐

最新文章

热门文章