在導航欄圖形不正確顯示（Bootstrap）

Question

我想創建一個導航欄使用bootstrap.But在導航欄中的主頁圖標顯示不正確。它不是在中間，不與其他列表並列。請幫助我解決這個問題。 問題： HTML：

<nav class="navbar navbar-inverse"> 
     <div class="container"> 
      <div class="row"> 
       <nav class="collapse navbar-collapse"> 
        <ul class="nav navbar-nav"> 
         <li> 
          <a href="#" class="navbar-brand text-center"> 
           <span class="glyphicon glyphicon-home"></span> 
          </a> 
         </li> 
         <li class="active"> 
          <a href="#">Avro keyboard<br/> 
           <small>For windows</small> 
          </a> 
         </li> 
         <li> 
          <a href="#">iAvro<br/> 
           <small>For Mac OS X</small> 
          </a> 
         </li> 
         <li> 
          <a href="#">ibus-avro<br/> 
           <small>for linux</small> 
          </a> 
         </li> 
         <li> 
          <a href="#">Bangla Fonts<br/> 
           <small>Unicode/ANSI fonts</small> 
          </a> 
         </li>      
         <li> 
          <a href="#">Others<br/> 
           <small>Misc goodies</small> 
          </a> 
         </li> 
         <li> 
          <a href="#">Blog<br/> 
           <small>Stay updated!</small> 
          </a> 
         </li> 
         <li> 
          <a href="#">Help and support<br/> 
           <small>Forum & Help files</small> 
          </a> 
         </li> 
         <li> 
          <a href="#">Developers<br/> 
           <small>repositories and resources</small> 
          </a> 
         </li>     
        </ul> 
       </nav> 
      </div> 
     </div> 
    </nav> 

CSS：

li { 
    border-left: 1px solid; 
    border-top: 0px; 
    border-right: 1px solid; 
    border-bottom: 0px; 
    border-style: solid; 
    border-color: #545454; 
} 
a { 
    color: #FFFFFF !important; 
} 
small { 
    color: #C5C6C1; 
    font-style: italic; 
} 

Answer 1

您可以應用任何更改下面的CSS規則：

.navbar-inverse .navbar-brand .glyphicon{ 
    padding: 5px 0 0 15px; 
} 

.navbar { 
 
    border-radius: 0; 
 
} 
 
.navbar-inverse .navbar-header .navbar-brand { 
 
    color: #FFFFFF; 
 
} 
 
.navbar-inverse .navbar-nav > li:first-child { 
 
    border: none; 
 
    padding-top: 10px; 
 
} 
 
.navbar-inverse .navbar-nav { 
 
    border-left: 1px solid #545454; 
 
} 
 
.navbar-inverse .navbar-nav > li { 
 
    border: none; 
 
    border-left: 1px solid #545454; 
 
    border-right: 1px solid #545454; 
 
} 
 
.navbar-inverse ul.navbar-nav > li > a { 
 
    color: #FFFFFF; 
 
} 
 
small { 
 
    color: #C5C6C1; 
 
    font-style: italic; 
 
} 
 
@media (min-width: 1200px) { 
 
    .navbar .navbar-nav { 
 
    display: inline-block; 
 
    float: none; 
 
    vertical-align: top; 
 
    } 
 
    .navbar .navbar-collapse { 
 
    text-align: center; 
 
    } 
 
    .navbar-inverse .navbar-header a { 
 
    display: none; 
 
    } 
 
} 
 
@media (max-width: 1200px) { 
 
    .navbar-inverse .navbar-nav > li:first-child { 
 
    display: none; 
 
    } 
 
    .navbar-inverse .navbar-nav { 
 
    border: none; 
 
    } 
 
    .navbar-inverse .navbar-brand { 
 
    line-height: 0; 
 
    } 
 
    .navbar-inverse .navbar-nav > li { 
 
    border: none; 
 
    } 
 
    .navbar-inverse .navbar-header { 
 
    float: none; 
 
    } 
 
    .navbar-inverse .navbar-left, 
 
    .navbar-right { 
 
    float: none !important; 
 
    } 
 
    .navbar-inverse .navbar-toggle { 
 
    display: block; 
 
    } 
 
    .navbar-inverse .navbar-collapse { 
 
    border-top: 1px solid transparent; 
 
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); 
 
    } 
 
    .navbar-fixed-top { 
 
    top: 0; 
 
    border-width: 0 0 1px; 
 
    } 
 
    .navbar-inverse .navbar-collapse.collapse { 
 
    display: none !important; 
 
    } 
 
    .navbar-inverse .navbar-nav { 
 
    float: none !important; 
 
    margin-top: 7.5px; 
 
    } 
 
    .navbar-inverse .navbar-nav > li { 
 
    float: none; 
 
    } 
 
    .navbar-inverse .navbar-nav > li > a { 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    } 
 
    .navbar-inverse .collapse.in { 
 
    display: block !important; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-inverse"> 
 
    <div class="container-fluid"> 
 
    <!-- Brand and toggle get grouped for better mobile display --> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 

 
     </button> 
 
     <a class="navbar-brand" href="#"> <span class="glyphicon glyphicon-home"></span> 
 
     </a> 
 

 
    </div> 
 
    <!-- Collect the nav links, forms, and other content for toggling --> 
 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
     <ul class="nav navbar-nav"> 
 
     <li> <a href="#"><span class="glyphicon glyphicon-home"></span> 
 
          </a> 
 

 
     </li> 
 
     <li class="active"> <a href="#">Avro keyboard<br/> 
 
           <small>For windows</small> 
 
          </a> 
 

 
     </li> 
 
     <li> <a href="#">iAvro<br/> 
 
           <small>For Mac OS X</small> 
 
          </a> 
 

 
     </li> 
 
     <li> <a href="#">ibus-avro<br/> 
 
           <small>for linux</small> 
 
          </a> 
 

 
     </li> 
 
     <li> <a href="#">Bangla Fonts<br/> 
 
           <small>Unicode/ANSI fonts</small> 
 
          </a> 
 

 
     </li> 
 
     <li> <a href="#">Others<br/> 
 
           <small>Misc goodies</small> 
 
          </a> 
 

 
     </li> 
 
     <li> <a href="#">Blog<br/> 
 
           <small>Stay updated!</small> 
 
          </a> 
 

 
     </li> 
 
     <li> <a href="#">Help and support<br/> 
 
           <small>Forum & Help files</small> 
 
          </a> 
 

 
     </li> 
 
     <li> <a href="#">Developers<br/> 
 
           <small>repositories and resources</small> 
 
          </a> 
 

 
     </li> 
 
     </ul> 
 
    </div> 
 
    <!-- /.navbar-collapse --> 
 
    </div> 
 
    <!-- /.container-fluid --> 
 
</nav>