我如何修改这个引导代码？

Question

我发现了一个代码

http://usebootstrap.com/theme/facebook

但在这个代码，我要让“主页图标”从来没有在任何浏览器尺寸倒塌。

CODE：

  <div class="navbar navbar-blue navbar-static-top"> 
      <div class="navbar-header"> 
       <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse"> 
       <span class="sr-only">Toggle</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       </button> 
       <a href="http://usebootstrap.com/theme/facebook" class="navbar-brand logo">b</a> 
      </div> 
      <nav class="collapse navbar-collapse" role="navigation"> 
      <ul class="nav navbar-nav"> 
       <li> 
       ###▽▽▽ I want this icon remain on the navbar, not in collapsed dropdown menu 
       <a href="#"><i class="glyphicon glyphicon-home"></i></a> 
       ###△△△ I want this icon remain on the navbar, not in collapsed dropdown menu 
       </li> 
      </ul> 
      <ul class="nav navbar-nav navbar-right"> 
       <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-user"></i></a> 
       <ul class="dropdown-menu"> 
        <li><a href="">More</a></li> 
        <li><a href="">More</a></li> 
        <li><a href="">More</a></li> 
       </ul> 
       </li> 
      </ul> 
      </nav> 
     </div> 

Bootply：https://www.bootply.com/lEfd188zDg

我试图移动<a href="#"><i class="glyphicon glyphicon-home"></i></a>到<a href="http://usebootstrap.com/theme/facebook" class="navbar-brand logo">b</a>后，但看起来非常难看。

我希望'主页图标'仍然可以在较小的浏览器中看到，看起来很好看并不难看。我怎样才能修好？

EDIT

图：

这种简化的代码是从上面我张贴首先代码稍有不同。

简化的代码：

<div class="wrapper"> 
<div class="box"> 
<div class="row row-offcanvas row-offcanvas-left"> 
<div class="column col-sm-12 col-xs-12" id="main"> 
<!-- top nav --> 
<div class="navbar navbar-blue navbar-static-top"> 
    <div class="navbar-header"> 
     <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse"> 
     <span class="sr-only">Toggle</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
    </div> 
    <nav class="collapse navbar-collapse" role="navigation"> 
    <ul class="nav navbar-nav"> 
     <li> 
     <a href="#"><i class="glyphicon glyphicon-home"></i></a> 
     </li> 
     <li> 
     <a href="#"><i class="glyphicon glyphicon-home"></i></a> 
     </li> 
     <li> 
     <a href="#"><i class="glyphicon glyphicon-home"></i></a> 
     </li> 
    </ul> 
    <ul class="nav navbar-nav navbar-right"> 
     <li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-user"></i></a> 
     <ul class="dropdown-menu"> 
      <li><a href="">More</a></li> 
      <li><a href="">More</a></li> 
     </ul> 
     </li> 
    </ul> 
    </nav> 
<!-- /top nav --> 
</div> 
</div> 
</div> 
</div> 
</div> 

原始结果是这样的：

和在窄的浏览器，

但目的结果是这样的：

能给我的路该怎么做呢？

Answer 1

我刚刚更新了您的HTML代码并添加了CSS。只需将其替换为你的。请只点击导航。

<style> 

.heading-icons li{ 
padding: 9px 10px; 
margin-top: 8px; 
margin-right: 15px; 
} 

</style> 
<div class="navbar navbar-blue navbar-static-top"> 
       <div class="col-xs-6 col-sm-6"> 
        <ul class="list-inline heading-icons"> 
         <li> 
          <a href="#"><i class="glyphicon glyphicon-home"></i></a> 
         </li> 
         <li> 
          <a href="#"><i class="glyphicon glyphicon-home"></i></a> 
         </li> 
         <li> 
          <a href="#"><i class="glyphicon glyphicon-home"></i></a> 
         </li> 
        </ul> 
       </div> 

       <div class="navbar-header col-xs-6 col-sm-6"> 
        <button class="navbar-toggle" type="button" data-toggle="collapse" 
          data-target=".navbar-collapse"> 
         <span class="sr-only">Toggle</span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
       </div> 
       <nav class="collapse navbar-collapse" role="navigation"> 

        <ul class="nav navbar-nav navbar-right"> 
         <li class="dropdown"> 
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i 
            class="glyphicon glyphicon-user"></i></a> 
          <ul class="dropdown-menu"> 
           <li><a href="">More</a></li> 
           <li><a href="">More</a></li> 
          </ul> 
         </li> 
        </ul> 
       </nav> 
       <!-- /top nav --> 
      </div>