我的導航欄不會水平對齊

我目前使用Bootstrap 3爲我的第一個客戶端創建網站，但我無法讓導航欄正確對齊。當我點擊col-sm斷點時，它停止顯示內聯。我查了很多其他文章，並應用了許多不同的CSS屬性，但無濟於事。在這一點上，我認爲我的代碼中可能存在一個錯誤，但我不確定。這是我第一個真正的項目，所以我在技術上是一個新手（原諒我可怕的代碼：P）。請讓我知道，如果有什麼我失蹤。這是一個截圖和我的代碼。我的導航欄不會水平對齊

<nav class="navbar navbar-default navbar-fixed-top" id="navbar"> 
    <div class="container"> 
     <!-- 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="#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> 
      <a class="navbar-brand " href="index.html">Spa&bull;ology</a> 
     </div> <!-- /.navbar-header --> 
     <!--NAV LINKS--> 
     <div class="collapse navbar-collapse" id="navbar-collapse-1"> 
      <ul class="nav navbar-nav "> 
       <!--LINKS--> 
       <li><a href="index.html">Home</a></li> 
       <!--DROPDOWN LINKS--> 
       <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Services<span class="caret"></span></a> 
        <ul class="dropdown-menu"> 
         <li><a href="waxingandsugaring.html">Waxing &amp; Sugaring</a></li> 
         <li><a href="manisandpedis.html">Manis &amp; Pedis</a></li> 
         <li><a href="spraytanning.html">Spray Tanning</a></li> 
         <li><a href="massages.html">Massages</a></li> 
         <li><a href="lashes.html">Lash Extensions</a></li> 
         <li><a href="facialsandpeels.html">Facials &amp; Peels</a></li> 
        </ul><!-- /.dropdwon-menu --> 
       </li> 
       <!-- /.dropdown --> 
       <li><a href="#">Products</a></li> 
       <li><a href="#">Contact Us</a></li> 
       <li><a href="http://www.secure-booker.com/spaology/ShopOnline/GiftCertificate.aspx" target="_blank">Gift Certificates</a></li> 
       <li><a href="http://www.secure-booker.com/spaology/MakeAppointment/" target="_blank">Book Online</a></li> 
      </ul> 
     </div><!-- /.navbar-collapse --> 
    </div><!-- /.container --> 
</nav>

這裏有一些我已經試過CSS屬性。我用這些屬性的不同組合無濟於事。

.navbar .navbar-nav > li { 
float:left;  
} 

.navbar .navbar-nav > li { 
display:inline;  
} 

.navbar .navbar-nav > li { 
display:block; 
float:left; 
vertical-align: top 
}

來源

2016-09-30 umaldo7

我不更加明確在第一時間道歉。每次編輯我都不會多次使用float屬性。我在不同的實例中使用了它們，但它沒有解決問題。 – umaldo7

我遇到的主要問題是.navbar-brand添加了一個換行符，一旦我點擊col-sm斷點並且導航欄不再內聯。它分成兩行，因此不再內聯。我希望這有助於澄清我遇到的問題。 – umaldo7

在沒有看到所有相關的CSS，很難給出具體的建議。但是，Bootstrap導航欄菜單會被編碼，以便在您指示的斷點處切換到隱藏狀態，並且菜單項本身可以垂直堆疊。

您可以看到自己的位置：http://getbootstrap.com/components/#navbar-fixed-top

爲了讓您的菜單保持可見和項目（在<li>元素）仍在線，你需要調整或以其他方式替換該斷點的CSS。

來源

2016-09-30 18:42:47

謝謝您的迴應！我添加了我遇到的問題的屏幕截圖。也許這將有助於更好地解釋我的問題。 – umaldo7

我看到了 - 菜單本身正在慢慢倒下。這通常是沒有空間同時包含兩個元素（徽標和菜單）的結果。標誌和元素是一個靜態寬度，因此當屏幕變窄時，它們的空間就會減少。這正是爲什麼移動菜單傾向於隱藏的原因。有幾種方法可以解決這個問題。一，減少元素的大小（寬度），以便它們可以共線並行。二，擴大容器，以便有更多的空間。三，採用手機式隱藏菜單。四，讓元素一個在另一個之上存在，也許集中它們。 –

偉大的建議。如果它沒有太多要問，你能發佈一個我可以使用的CSS的例子嗎？如果我要求太多，我表示歉意，我只是對此感到陌生，並且希望以正確的方式處理，而不是盲目。謝謝！ – umaldo7

只是看着你的CSS你已經定義了顯示和浮動2次。刪除重複的條目，並根據需要

.navbar .navbar-nav > li { 
display:inline; 
position:relative; 
display:block; 
float:left; 
vertical-align: top; 
}

修改試試這個https://jsfiddle.net/4k1yoctf/2/

來源

2016-09-30 18:26:26 Case

感謝您的回覆！我添加了我遇到的問題的屏幕截圖。也許這將有助於更好地解釋我的問題。 – umaldo7

@ umaldo7你說的名字浮到頂？ – Case

這是正確的。看起來好像Navbar品牌在我碰到了col-sm斷點時增加了一個換行符，從而使navbar非內聯。導航欄保持內聯MD和LG斷點，並在我點擊XS斷點時摺疊。我只有在遇到SM斷點時纔會遇到問題。我知道這是由於這兩個部分剩下的空間很小。是否有某種CSS技巧/黑客我缺少？ – umaldo7

謝謝大家的意見和建議。你們都應該獲得獎牌！我通過減小導航欄元素的大小（寬度）來解決此問題。通過一些像素操作，我能夠將所有導航欄項目放入一行。這裏是我用來解決問題的CSS的一個例子。希望這有助於未來的人。

.navbar .navbar-header > a { 
font-size: 1.4em; 
width: 40px; 
padding-left: 0px;

}

來源

2016-09-30 19:41:47 umaldo7

我的導航欄不會水平對齊

回答

相關問題