Question

在对twitter的bootstrap进行一些实验时，我试图在左侧创建一个带有Brand的导航栏，在它旁边创建一个折叠菜单，最后在右侧创建一组不扩展的图标。

问题部分：

      <!-- Non-collapsing right-side icons -->
      <div class="navbar-header navbar-right pull-right">
        <ul class="nav pull-right">
          <li class="pull-right"><a href="#">
            <img style="max-width:32; vertical-align:middle;" src="img/icon1.png">
          </a></li>
          <li class="pull-right"><a href="#">
            <img style="max-width:32; vertical-align:middle;" src="img/icon2.png">
          </a></li>
        </ul>
      </div> <!--/.navbar-right -->

正如你在小提琴中看到的那样，当菜单折叠时，没关系。但是当窗口足够大以使菜单扩展时，图标会向左移动（在品牌和菜单之间）。

我还尝试将非折叠图标放在navbar-header之外：在这种情况下，展开的导航栏没问题，但折叠的版本变得错误（图标位于不同的行中）。

提前感谢您的帮助。

Answer 1

您需要以不同方式构造html，使用要在导航栏上使用的类（在导航栏中不使用右拉和左拉）并编写自定义css。

DEMO：http://jsbin.com/humoye/1/

代码：http://jsbin.com/humoye/1/edit

尽量不要使用内联样式，并确保使用正确的语法，如果可能的话，使用字体而不是图形，因为视网膜设备上的光栅图像看起来会模糊，除非你加载大小和尺寸的两倍在css（或其他几种方式）。

<强> CSS

/* icon */ .custom-navbar .fa {font-size:25px}

@media (max-width:767px) { 
    .custom-navbar .navbar-right {
        float: right;
        padding-right: 15px;
    }
    .custom-navbar .nav.navbar-nav.navbar-right li {
        float: right;
    }
    .custom-navbar .nav.navbar-nav.navbar-right li > a {
        padding:8px 5px;
    }
    .custom-navbar .navbar-toggle {
        float: left
    }
    .custom-navbar .navbar-header {
        float: left;
        width: auto!important;
    }
    .custom-navbar .navbar-collapse {
        clear: both;
        float: none;
    }
}

<强> HTML

<nav class="navbar navbar-inverse navbar-static-top custom-navbar" role="navigation">
     <div class="container">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        </button>
        <div class="navbar-header">
           <a class="navbar-brand" rel="home" href="#" title="Help">
           Help ?
           </a>
        </div>
        <!-- Non-collapsing right-side icons -->
        <ul class="nav navbar-nav navbar-right">
           <li>
             <a href="#" class="fa fa-cog"></a>
           </li>
           <li>
             <a href="#" class="fa fa-home"></a>
           </li>
        </ul>
        <!-- the collapsing menu -->
        <div class="collapse navbar-collapse navbar-left"  id="navbar-collapse-1">
           <ul class="nav navbar-nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Contact</a></li>
           </ul>
        </div>
        <!--/.nav-collapse -->
     </div>
     <!--/.container -->
  </nav>

Answer 2

根据我的理解，菜单 div应位于标题 div内。

页眉 div在任何屏幕尺寸上的零售位置也应该有100％的宽度。

引导导航栏右侧的图标

2 个答案:

DEMO：http://jsbin.com/humoye/1/