Bootstrap 3導航欄徽標放置在中心

Question

徽標合攏時，我將徽標放到中間，並且也可以通過打開更寬的屏幕來做到這一點，目前代碼看起來像這樣，徽標出現在不需要的左側，

標頭的CSS，

     header
     {
        background-image: url("../images/header.png");
        background-repeat: repeat-x;
        width: 100%;
        height: 150px;
     } 




 <header>
      <div class="navbar navbar-inverse" role="navigation">
         <div class="container">

            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                   <span class="sr-only">Toggle navigation</span>
                   <span class="icon-bar"></span>
                   <span class="icon-bar"></span>
                   <span class="icon-bar"></span>
                </button>
                <a href="javascript:void;"><img id="logo" src="images/logo.png"></a>
             </div>

             <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li><a style="color: white; text-decoration: none; font-size: 20px; display: inline-block; width: 96px; margin-right: 14px; margin-top: 28px; font-family: sans-serif;" href="#">Home</a></li>
                    <li><a style="color: white; text-decoration: none; font-size: 20px; display: inline-block; width: 96px; margin-left: 14px; margin-right: 14px; margin-top: 28px; font-family: sans-serif;" href="#about">About</a></li>
                    <li><a style="color: white; text-decoration: none; font-size: 20px; display: inline-block; width: 96px; margin-left: 14px; margin-right: 14px; margin-top: 28px; font-family: sans-serif;" href="#contact">Protfolio</a></li>
                    <li><a style="color: white; text-decoration: none; font-size: 20px; display: inline-block; width: 96px; margin-left: 14px; margin-right: 14px; margin-top: 28px; font-family: sans-serif;" href="#">Blog</a></li>
                    <li><a style="color: white; text-decoration: none; font-size: 20px; display: inline-block; width: 96px; margin-left: 14px; margin-right: 14px; margin-top: 28px; font-family: sans-serif;" href="#about">Services</a></li>
                    <li><a style="color: white; text-decoration: none; font-size: 20px; display: inline-block; width: 140px; margin-left: 14px; margin-top: 28px; font-family: sans-serif;" href="#contact">Contact Me</a></li>
                </ul>
             </div>

          </div>
      </div>
 </header>

在<li>放置徽標時，它會顯示在較寬屏幕的中央，但會出現在小屏幕的折疊列表中。 目前看起來像這樣

Answer 1

我不確定所有內容，但我將從復制徽標開始。

第一個徽標：

這是針對小型設備的，放置在您的.navbar-toggle元素中。
您需要添加一些CSS行以使其居中。

第二個徽標：

這是針對較大的設備的，放置在鏈接列表中。
您必須將.hidden-sm和.hidden-xs類添加到<li>元素，以避免將其放入折疊列表中（在小型設備上）

<header>
      <div class="navbar navbar-inverse" role="navigation">
         <div class="container">

            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                   <span class="sr-only">Toggle navigation</span>
                   <img class="logo" src="http://placehold.it/95/3498db/fff">
                </button>
             </div>

             <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="hidden-xs hidden-sm"><a href="#" class="logo-link"><img class="logo" src="http://placehold.it/95/3498db/fff"></a></li>
                    <li><a style="color: white; text-decoration: none; font-size: 20px; display: inline-block; width: 96px; margin-right: 14px; margin-top: 28px; font-family: sans-serif;" href="#">Home</a></li>
                    <li><a style="color: white; text-decoration: none; font-size: 20px; display: inline-block; width: 96px; margin-left: 14px; margin-right: 14px; margin-top: 28px; font-family: sans-serif;" href="#about">About</a></li>
                    <li><a style="color: white; text-decoration: none; font-size: 20px; display: inline-block; width: 96px; margin-left: 14px; margin-right: 14px; margin-top: 28px; font-family: sans-serif;" href="#contact">Protfolio</a></li>
                    <li><a style="color: white; text-decoration: none; font-size: 20px; display: inline-block; width: 96px; margin-left: 14px; margin-right: 14px; margin-top: 28px; font-family: sans-serif;" href="#">Blog</a></li>
                    <li><a style="color: white; text-decoration: none; font-size: 20px; display: inline-block; width: 96px; margin-left: 14px; margin-right: 14px; margin-top: 28px; font-family: sans-serif;" href="#about">Services</a></li>
                    <li><a style="color: white; text-decoration: none; font-size: 20px; display: inline-block; width: 140px; margin-left: 14px; margin-top: 28px; font-family: sans-serif;" href="#contact">Contact Me</a></li>
                </ul>
             </div>

          </div>
      </div>
 </header>

@media (max-width: 768px) {
    .navbar-header {
        text-align: center;
    }
    .navbar-toggle {
        float: none;
    }
}

Bootply

注意：我建議避免使用內聯樣式。

Answer 2

技巧是通過CSS-在媒體查詢中，對於較小的屏幕，請隱藏此徽標。

@media (max-width: 600px) {
  li.className{
   display: none;
  }
}