Twitter bootstrap 3 如何将引导导航栏与div底部对齐

我有一个基本的基于引导的布局，我正在工作。我在navbar品牌元素中放置了一个徽标图像。这个标志大约有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 -->

切换导航






标题
Donec在eget metus为非mi porta孕妇确定了最佳身份。这是一种很好的调味品，是一种很好的调味品。这是一个很好的例子。Donec sed odio dui


标题
Donec在eget metus为非mi porta孕妇确定了最佳身份。这是一种很好的调味品，是一种很好的调味品。这是一个很好的例子。Donec sed odio dui


标题
Donec sed odio dui。我是奥迪奥先生，我是艾格斯塔·艾格特·奎姆先生。猫门前庭舌骨。这是一种很好的调味品，是一种很好的调味品

要实现您的目标，最简单的方法是为您的ul类使用绝对位置

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

---

这将使菜单项位于导航栏的底部。另外，如果你想让你的图像包含在你的导航栏中，那么你必须稍微修改一下你的html。当您使用

navbar品牌时

会将一大堆css属性添加到您的navbar中，而您可能不希望使用这种大小的图像。因此，如果您只需将

导航栏品牌

类更改为

向左拉

，您将获得更好的布局，并能够将图像包含在导航栏中。这是我正在描述的布局图。如果你需要一些不同的东西，请告诉我，我可以改变它

我遇到的问题是，最右边的菜单项与页面右侧对接。我将其改为右：10%，而不是右：0

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

---

您要做的是将徽标放在标题中徽标的上方，并将菜单按钮放在徽标的下方？您可以使用

padding top

或

margin top

上的

导航栏right

@RuiCosta-不，我不想要徽标下方的菜单。徽标位于导航栏品牌元素的左侧，导航栏右侧当前位于整个导航栏空间的顶部。我希望它位于底部，以便与徽标底部对齐，但位于右侧。@makshh-我不希望使用填充或边距，因为如果徽标的大小改变，那么所有这些数字也必须改变。当我们考虑到所有响应性的尺寸变化时，这一点尤其正确。您希望您的徽标图像在导航栏中还是像代码中一样悬垂？换句话说，你的导航栏只有80px的高度，所以你的图像悬挂在导航栏下面。好的，我之前也在尝试这个概念，我遇到了一个问题，我相信你的例子中也有这个问题。尽管菜单现在在导航栏中是底部对齐的，但无论浏览器窗口有多宽，它也将保持在页面的右侧。理想情况下，它应该与内容区域的右侧对齐。希望我解释正确。右对齐到内容区域的右侧？您是说希望联系人链接与第一行内容的右侧对齐吗？是，联系人链接应与计划中内容的右侧对齐，即一旦设计被刷新并获得批准，我们将返回并添加媒体查询，以较小屏幕尺寸的较小内容替换徽标。因此，我并不真正关心菜单项与徽标重叠的问题。但从美学角度看，菜单栏应该与内容区域的隐含右边缘对齐。