Bootstrap 3 - 导航栏内容的垂直对齐

Question

http://www.bootply.com/tfGjhlJnPL

我试图让右对齐的导航项与左对齐图像的底部垂直对齐。

我还希望导航栏切换按钮在导航栏折叠时以相同的方式与图像底部对齐......

欢迎任何建议:)

Answer 1

好吧，如果你不反对它，这可以主要通过使用来实现 position:absolute. 。例如，根据您当前的样式，此 CSS 可以工作：

.navbar-header{
    position:relative;
}
@media (max-width: 991px) {
    .navbar-toggle{
        position:absolute;
        right:0;
        bottom:0;
    }
}   
@media (min-width: 991px) {
    .navbar-nav{
        position:absolute;
        right:0;
        bottom:0;
    }
}

这是一个 更新了 Bootply 向您展示这取得了什么成果。根据您的喜好，您可能还需要调整每个元素的 padding 或者 margin 改变它与标题区域底部的距离（我没有在演示中更改这些样式）。希望这可以帮助！如果您有任何疑问，请告诉我。