引导导航栏右侧的图标 [英] Icons on the right side of the bootstrap navbar

问题描述

在使用twitter的bootstrap进行一些实验时，我试图使用左侧的品牌导航栏，旁边的折叠菜单，以及右侧不扩展的图标。

以下是 diddly'fiddle ：

而且有问题的部分：

 <！ - 不折叠右侧图标 - > 
< 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  - > 
  

正如你所看到的，当菜单折叠时，但是当窗口足够大，菜单可以展开时，图标会移动到左侧（品牌和菜单之间）。

我也试图把在导航栏标题外的非折叠图标：在这种情况下，展开的导航栏是确定的，但折叠的版本变成错误（图标在不同的行）。

谢谢

解决方案

您需要以不同的方式构造html，使用适用于navbar（pull-right和pull-left不要在navbar中使用）和写自定义css。

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

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

尽量不要使用内联样式，并且确保使用正确的语法，如果可能的话使用字体而不是图形，因为视网膜设备上的光栅图像看起来会模糊，除非加载大小和大小两倍

$ b

  / * 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-navbarrole =navigation> 
< div class =container> 
< button type =buttonclass =navbar-toggle collapseddata-toggle =collapsedata-target =＃navbar-collapse-1> 
< span class =sr-only>切换导航< / 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 =homehref =＃title =Help> 
帮助？ 
< / a> 
< / div> 
<！ - 不折叠右侧图标 - > 
< 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> 
<！ - 折叠菜单 - > 
< div class =collapse navbar-collapse navbar-leftid =navbar-collapse-1> 
< ul class =nav navbar-nav> 
< li class =active>< a href =＃>首页< / a>< / li& 
< li>< a href =＃>关于< / a>< / li& 
< li>< a href =＃>联系人< / a>< / li> 
< / ul> 
< / div> 
<！ -  /。nav-collapse  - > 
< / div> 
<！ -  /。container  - > 
< / nav> 
  

While doing some experimentation with twitter's bootstrap, I am trying to make a navbar with the Brand on the left side, the collapsing menu next to it, and finally a not-expanding set of icons on the right side.

Here's a diddly'fiddle:

And the problematic part :

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

As you can see in the fiddle, when the menu is collapsed, it's ok. But when the windows is large enough for the menu to expand, the icons are moved to the left (between the brand and the menu).

I also tried to put the non collapsing icons outside the navbar-header : in this case the expanded navbar is ok, but the collapsed version become wrong (the icons are in a different row).

Thank you in advance for your help.

解决方案

You need to structure the html differently, use classes that are meant to be used on the navbar (pull-right and pull-left are not to be used in the navbar) and write custom css.

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

Code: http://jsbin.com/humoye/1/edit

Try not to use inline-styles, and do be sure to use correct syntax, use fonts instead of graphics if possible because raster images on retina devices it will look blurry unless you load double the size and size it down in the css (or several other ways).

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>

这篇关于引导导航栏右侧的图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！