Question

我没有使用Bootstrap 3的品牌，而是使用了一个响应式导航栏，在导航栏的最左侧位置放置了我的徽标，并在导航栏上的徽标旁边显示了所需的菜单选项。

我不知道如何处理的问题是，因为我希望这个导航栏能够响应，当屏幕尺寸缩小到iPhone尺寸时，我希望我的典型Bootstrap汉堡包菜单位于最右边导航栏，当按下时，将仅显示我的菜单项，但同时，我希望我的徽标始终保持导航栏上最左侧的位置，无论使用何种屏幕分辨率。

我提供了目前所拥有的基本结构，但不确定如何包含我的徽标或示例，现在链接始终保留在导航栏上并始终位于最左侧位置。

我为样本创建了http://www.bootply.com/HcZhCxMC4s，但它并不完美，因为我不确定如何使用菜单项定位徽标/链接。

<nav class="navbar navbar-default" role="navigation">
    <ul class="my-logo">
        <li><a href="#">Logo Link</a></li>
    </ul>
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>    
  </div>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav pull-left">
        <li><a href="#">Menu 1</a></li>
        <li><a href="#">Menu 2</a></li>
    </ul>
  </div>
</nav>

Answer 1

您只需要使用Bootstrap Navbar的相同标记......

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    /*YOUR LOGO OR LINK HERE WITH THE CLASS NAVBAR-BRAND*/    
    <a class="navbar-brand" href="#">Logo Link</a>

检查 BootplyDemo

Answer 2

您可能想要添加一些样式：

的CSS：

@media all and (max-width: 768px) {
 .navbar-header {
    position: absolute;
    right: 0;
     top:0;
  }
  .my-logo {
    height: 50px;    
    padding-bottom: 0;
    margin-bottom: 0
  }
  .my-logo li a {
      line-height: 50px;
}

http://www.bootply.com/9KstQ2THvF#

这是你之后的事吗？

Answer 3

关于bootstrap documentation页面的最简单答案：

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

Bootstrap响应式导航栏，最左边的徽标，后面是菜单项，全部在导航栏上

3 个答案: