このブートストラップコードを変更するにはどうすればよいですか？

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="http://usebootstrap.com/theme/facebook" class="navbar-brand logo">b</a>後に<a href="#"><i class="glyphicon glyphicon-home"></i></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>