удаление поплавков из bootstrap navbar без влияния на макет

Question

привет, ребята, я в основном новичок в css и пытаюсь создать загрузочный навигатор, проблема в том, что мне пришлось сосредоточить определенное содержимое навигационной панели I.E, в центре пунктов меню.

В основном, после того, как я прошел через источник бутстрапа navbar, выяснилось, что все элементы в навигационной панели отображаются в одной строке, а затем переходят к следующей строке, потому что элементы в навигационной панели перемещаются вправо или влево движение удалить поплавки выравнивание сломанные,

так, что я пытался сделать, это: - HTML код (ТИПОВАЯ самозагрузки разметки):

<nav role="navigation" class="navbar navbar-default navbar-fixed"> 
      <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> 
       <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="#" class="navbar-brand">Brand</a> --> 
     </div> 
     <!-- Collection of nav links and other content for toggling --> 
     <div id="navbarCollapse" class="collapse navbar-collapse"> 
      <ul class="nav navbar-nav"> 
       <li class="active"><a href="#">Home</a></li> 
       <li><a href="#">Profile</a></li> 
       <li><a href="#">Messages</a></li> 
      </ul> 
      <ul class="nav navbar-nav navbar-right"> 
       <li><a href="#"><img src="http://images.dailyo.in/images/facebook_two.png" alt=""></a></li> 
      </ul> 
     </div> 
    </div> 
</nav> 

И CSS (настраиваемая CSS):

.navbar-default .navbar-collapse ul.navbar-nav{ 
    text-align: center; 
    float: none; 
    width: 300px; 
} 

.navbar-default .navbar-collapse ul.navbar-nav li { 
    float: none; 
    display: inline-block; 
} 

.brand-holder { 
    height: 200px; 
    background: #000; 
} 


.navbar-fixed { 
    position: fixed; 
    width: 100%; 
} 

Дело нужно заметить, увидеть, как я извлекал поплавки в ul.navbar-nav и ul.navbar-nav li

Fiddle here ., теперь посмотрим, как содержимое

<ul class="nav navbar-nav navbar-right"> 
       <li><a href="#"><img src="http://images.dailyo.in/images/facebook_two.png" alt=""></a></li> 
      </ul> 

сплавляется к следующей строке. есть ли в любом случае, что я могу иметь содержимое обратно в строку с элементами меню?

P.S. :: Мне бы очень хотелось избежать использования абсолютного позиционирования.

спасибо.

Alex-z.

Answer 1

Если мое понимание ваш вопрос правильно, возможно, изменяя CSS, как показано ниже

.navbar-default .navbar-collapse ul.navbar-nav{ 
    text-align: center; 
    float: none; 
    text-align:left; 

и вместо того, чтобы в другой UL для FB Logo держать весь Ли, как и в самой первой Ul и выравниванию направо, должно помочь

поэтому окончательный HTML будет

<nav role="navigation" class="navbar navbar-default navbar-fixed"> 
     <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> 
      <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="#" class="navbar-brand">Brand</a> -->  <!-- </div>--> 
    <!-- Collection of nav links and other content for toggling --> 
    <div id="navbarCollapse" class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#">Profile</a></li> 
      <li><a href="#">Messages</a></li> 
      <li style="float:right"><a href="#"><img src="http://images.dailyo.in/images/facebook_two.png" alt=""></a></li> 
     </ul> 

    </div> 
</div> 

Вы можете проверить результат fiddle

Надеюсь, это поможет.

Спасибо, Филимон