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

Question

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

Answer 1

使用Bootstrap的源代码（非编译）版本，我将其添加到我的.less文件中。它具有为btn-group内的btn计算适当的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);
}