如何将引导导航栏与 div 底部对齐答案

【问题标题】：How to align bootstrap navbar to bottom of div如何将引导导航栏与 div 底部对齐
【发布时间】：2016-10-31 11:04:01
【问题描述】：

我正在处理一个基于引导程序的基本布局。我在导航栏品牌元素中放置了一个徽标图像。徽标大约 140 像素高。然后我有一个导航栏右侧的菜单元素，我想将其锚定到导航栏本身的底部。我已经在导航栏右侧尝试了垂直对齐，但它没有任何影响。谁能解释如何实现这一目标？这是基本的布局代码：

    <!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"><img src="images/logo.png" width="432" height="143" ></a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
         <li><a href="#">Services</a></li>
       <li><a href="#">Contact</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>


<div class="container" style="padding-top:200px;">


<div class="row">
    <div class="col-md-4">
      <h2>Heading</h2>
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
      <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
    </div>
    <div class="col-md-4">
      <h2>Heading</h2>
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
      <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
   </div>
    <div class="col-md-4">
      <h2>Heading</h2>
      <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
      <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
    </div>
  </div>

</div> <!-- /container -->

【问题讨论】：

您要做的是将徽标放在标题上方，将菜单按钮放在徽标下方？
您可以在navbar-right 上使用padding-top 或margin-top。
@RuiCosta - 不，我不想要徽标下方的菜单。徽标位于 navbar-brand 元素的左侧，而 navbar-right 当前位于整个导航栏空间的顶部。我希望它在底部，因此它与徽标的底部对齐，但在右侧。
@makshh - 我宁愿不使用填充或边距，因为如果徽标的大小发生变化，那么所有这些数字也必须改变。一旦我们考虑到所有响应式尺寸变化，尤其如此。
您希望您的徽标图像在您的导航栏中还是像在您的代码中一样悬垂在上面？换句话说...您的导航栏只有 80 像素的高度，所以您的图片会挂在导航栏下方。

标签： twitter-bootstrap-3 navbar vertical-alignment

【解决方案1】：

实现你想要的最简单的方法是为你的 ul 类使用绝对位置。

.nav {position:absolute;
bottom:0;
right:0;}

这会将您的菜单项放置在导航栏的底部。此外，如果您想让您的图像包含在您的导航栏中，那么您将不得不稍微更改您的 html。当您使用navbar-brand 时，您会在导航栏中添加一大堆 CSS 属性，您可能不希望使用这种大小的图像。因此，如果您只是将navbar-brand 类更改为pull-left，您将获得更好的布局并能够将您的图像包含在导航栏中。这是我正在描述的布局的一个小提琴。如果您需要不同的东西，请告诉我，我可以改变它。 https://jsfiddle.net/xbxat9mq/

【讨论】：

好的，我之前也在试验这个概念，我遇到了一个问题，我相信你的例子也是如此。尽管菜单现在在导航栏中底部对齐，但无论浏览器窗口有多宽，它也将保持在页面的右侧。理想情况下，它应该与内容区域的右侧对齐。希望我解释正确。
右对齐到内容区域的右侧？您是说希望联系链接与第一行内容的右侧对齐？
是的，联系链接应该对齐到
中内容的右侧
计划是，一旦设计被刷新并获得批准，我们将返回并添加媒体查询，以在较小的屏幕尺寸上用较小的徽标替换徽标。所以我真的不关心与标志重叠的菜单项。但从美学上讲，菜单栏应该与内容区域隐含的右边缘对齐。
让我们continue this discussion in chat.

【解决方案2】：

我遇到的问题是最右边的菜单项与页面的右侧对接。而不是right:0，我把它改成了right:10%

.nav {
    position:absolute;
    bottom:0;
    right:10%;
}

【讨论】：