Bootstrap3实用教程
3.3.6 两端对齐的按钮组
阅读(

Bootstrap基础

Bootstrap全局样式

Bootstrap组件

Glyphicons字体图标

下拉菜单

按钮组

禁用某个按钮组

按钮组嵌套

按钮的尺寸

按钮工具栏

创建按钮组

两端对齐的按钮组

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所示:

使用 a 元素的按钮组
图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所示:

使用 button 元素的按钮组
图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 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验