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;
    }
}

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