twitter-bootstrap - 在 Bootstrap 3 Navbar 中垂直居中 btn-group

Question

我希望使用 Bootstrap 3 在导航栏中垂直居中 btn-group。目前的对齐方式是 btn-group 的底部与文本的底部匹配。

Answer 1

使用 Bootstrap 的源代码（非编译）版本，我将其添加到我的 .less 文件中。它具有为 btn 组内的 btn(s) 计算正确的 margin-top 和 margin-bottom 的效果。

.nav > li > div.btn-group > .btn {
    .navbar-vertical-align(@line-height-computed+@padding-base-vertical*2+2/*for top and bottom border, which Bootstrap hard-codes as 1px*/);
}

以下是 mixins.less 中 .navbar-vertical-align 的定义方式：

.navbar-vertical-align(@element-height) {
    margin-top: ((@navbar-height - @element-height) / 2);
    margin-bottom: ((@navbar-height - @element-height) / 2);
}