Question

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

    <!-- 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 -->

Answer 1

我遇到的问题是最右边的菜单项是在页面的右侧。而不是右：0，我改为右：10％

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

Answer 2

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

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

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

如何将bootstrap导航栏对齐到div的底部

2 个答案: