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

Posted 2023-03-05

【中文标题】Bootstrap 3 - 导航栏内容的垂直对齐

【英文标题】：Bootstrap 3 - vertical alignment of navbar content

【发布时间】：2014-09-20 21:11:37

【问题描述】：

http://www.bootply.com/tfGjhlJnPL

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

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

欢迎任何建议:)

【参考方案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 以改变它与标题区域底部的距离（我在演示中没有更改这些样式）。希望这可以帮助！如果您有任何问题，请告诉我。

【讨论】：

太棒了！很高兴我能帮忙。