Navbarが横方向に整列しない

Question

私は現在、最初のクライアント用のWebサイトを作成するためにBootstrap 3を使用していますが、Navbarを正しく整列させることができません。私は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 
} 

Answer 1

を試し、それが具体的なアドバイスを与えることは難しいです。ただし、ブートストラップのナビゲーションバーのメニューは、指定したブレークポイントで非表示に切り替わり、メニュー項目自体が垂直方向にスタックするようにコード化されています。あなたがここにあなた自身のために見ることができます

：あなたのメニューが見え滞在し、アイテム（<li>要素）はインライン残る持つためにhttp://getbootstrap.com/components/#navbar-fixed-top

を、あなたは調整したり、そうでない場合はそのブレークポイントのためのCSSを上書きする必要があります。

Answer 2

あなたのCSSを見て、表示と浮動を2回定義しました。重複したエントリを削除し、

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

を必要に応じて変更し、関連するCSSのすべてを見ることなく、この https://jsfiddle.net/4k1yoctf/2/

Answer 3

あなたのご意見とアドバイスをいただき、ありがとうございます。あなたはすべてメダルに値する！私はこの問題を、navbarの要素のサイズ（幅）を減らすことで修正しました。ピクセルの操作によって、すべてのナビゲーションバーアイテムを1行に収めることができました。次に、問題を解決するために使用したCSSの例を示します。これは将来誰かを助けてくれることを願っています。初めてより明確にされていないため

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

}