My Navbar не будет выровнять по горизонтали

Question

В настоящее время я использую Bootstrap 3 для создания сайта для моего первого клиента, но я не могу заставить навигатор правильно выровняться. Он останавливает отображение строки, когда я ударяю точку останова. Я просмотрел многие другие статьи и применил много разных свойств 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

, не видя все соответствующие CSS, это трудно дать конкретные советы. Тем не менее, навигационные меню Bootstrap кодируются для переключения на скрытые в точке останова, которые вы указываете, и сами пункты меню стекают вертикально.

Вы можете увидеть для себя здесь: http://getbootstrap.com/components/#navbar-fixed-top

Для того, чтобы ваше меню остается видимым и пункты (<li> элементов) остаются рядными, вам нужно настроить или иначе переопределить CSS для этой точки останова.

Answer 2

Просто взглянув на ваш css, вы определили отображение и поплавок 2 раза. удалить повторяющиеся записи и изменять по мере необходимости

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

https://jsfiddle.net/4k1yoctf/2/ попробовать этот

Answer 3

Спасибо всем за ваш вклад и совет. Вы все заслуживаете медали! Я исправил эту проблему, уменьшив размер (ширину) элементов навигационной панели. С некоторыми манипуляциями с пикселями я смог поместить все элементы навигатора в одну строку. Вот пример CSS, который я использовал для устранения проблемы. Надеюсь, это поможет кому-то в будущем.

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

}