Bootstrap 两端对齐排列的按钮组

W3CSchool > bootstrap3中文手册 > Bootstrap 按钮组 > Bootstrap 两端对齐排列的按钮组

两端对齐排列的按钮组

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

关于边框的处理

由于对两端对齐的按钮组使用了特定的 HTML 和 CSS (即 display: table-cell),两个按钮之间的边框叠加在了一起。在普通的按钮组中,margin-left: -1px 用于将边框重叠,而没有删除任何一个按钮的边框。然而,margin 属性不支持 display: table-cell。因此,根据你对 Bootstrap 的定制,你可以删除或重新为按钮的边框设置颜色。

IE8 和边框

Internet Explorer 8 不支持在两端对齐的按钮组中绘制边框,无论是 <a><button> 元素。为了照顾 IE8,把每个按钮放入另一个 .btn-group 中即可。

参见 #12476 获取详细信息。

关于 <a> 元素

只须将一系列 .btn 元素包裹到 .btn-group.btn-group-justified 中即可。

<div class="btn-group btn-group-justified">
  ...
</div>

关于 <button> 元素

为了将 <button> 元素用于两端对齐的按钮组中,必须将每个按钮包裹进一个按钮组中you must wrap each button in a button group。大部分的浏览器不能将我们的 CSS 应用到对齐的 <button> 元素上,但是,由于我们支持按钮式下拉菜单,我们可以解决这个问题。

<div class="btn-group btn-group-justified">
  <div class="btn-group">
    <button type="button" class="btn btn-default">Left</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-default">Middle</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-default">Right</button>
  </div>
</div>

没有找到答案?搜索一下吧!

学习导航


Bootstrap3中文开发手册参考网站
w3c.3306.biz 提供的内容仅用于学习或测试。所有内容均整理自互联网!目的是为了让更多读者欣赏,我们不保证内容的正确性,并对任何法律问题及风险不承担任何责任。 当您在浏览本站时,代表您已接受了本站的使用条款和隐私条款。(删除内容:512876994#qq.com)