Bootstrap - плавающая навигационная кнопка справа

Я использую панель навигации для бутстрапа, но я хочу поплавать одной из кнопок справа, а не слева, как она есть. Вот HTML:Bootstrap - плавающая навигационная кнопка справа

<div class="navbar navbar-inverse navbar-fixed-top" 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 class="navbar-brand" href="#">Project name</a> 
    </div> 
    <div class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#about">About</a></li> 
     <li><a href="#contact" class="navbar-nav pull-right">Contact</a></li> 
     </ul> 
    </div> 
    </div> 
</div>

Я попытался с помощью nav navbar-nav navbar-right, float:right и pull-right. Я действительно не знаю, что еще я мог сделать. Любая помощь приветствуется.

JSFiddle

источник

2014-02-04 Michael Blake

Создать отдельную ul.nav только для этого элемента списка и поплавок, что ul права.

jsFiddle

источник

2014-02-04 05:34:07 helion3

Смотрите мой ответ ниже. Сам Bootstrap имеет класс 'navbar-right', поэтому, если для такого меню имеется выпадающее меню, оно будет правильно выровняться. – Ravimallya

@Ravimallya спасибо! Ваше решение было очень полезно! – SirBT

Вы должны использовать следующую разметку. Если вы хотите поместить любые пункты меню вправо, создайте отдельный <ul class="nav navbar-nav"> с классом navbar-right.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 

 
<head> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
</head> 
 

 
<body> 
 
    <div class="navbar navbar-inverse navbar-fixed-top" 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 class="navbar-brand" href="#">Project name</a> 
 
     </div> 
 
     <div class="collapse navbar-collapse"> 
 
     <ul class="nav navbar-nav"> 
 
      <li class="active"><a href="#">Home</a></li> 
 
      <li><a href="#about">About</a></li> 
 

 
     </ul> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
      <li><a href="#contact">Contact</a></li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

источник

2014-02-04 05:36:13 Ravimallya

Спасибо, он отлично работает для полного экрана. Но это не выглядит хорошо на мобильном телефоне. Было бы здорово, если бы он выровнялся так же, как другие, с каким-то разделителем. –

Если вы хотите разделиться в мобильном представлении, дайте пользовательский класс и напишите стили в запросах условных носителей. – Ravimallya

Bootstrap - плавающая навигационная кнопка справа

ответ

Смежные вопросы