css - 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 以改变它与标题区域底部的距离(我没有更改这些我的演示中的样式)。希望这可以帮助!如果您有任何疑问，请告诉我。