Bootstrap navigation bar: navbar-right

Я создаю эту простую навигационную панель, используя бутстрап. Я новичок в веб-дизайне, используя bootstrap и css.Bootstrap navigation bar: navbar-right

<body>  
    <div class="container"> 
<div class="navbar navbar-default"> 

    <div class="navbar-header"> 
     <a class="navbar-brand" href="#"></a> 
    </div> 
    <ul class="nav navbar-nav"> 

     <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Profile<span class="caret"></span></a> 
     <ul class="dropdown-menu"> 
      <li><a href="#">1</a></li> 
      <li><a href="#">2</a></li> 
      <li><a href="#">3</a></li> 
      <li><a href="#">4</a></li> 
     </ul> 
     </li> 
     <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Comments<span class="caret"></span></a> 
     <ul class="dropdown-menu"> 
      <li><a href="#">1</a></li> 
      <li><a href="#">2</a></li> 
      <li><a href="#">3</a></li> 
      <li><a href="#">4</a></li> 
     </ul> 
     </li> 
     <li><a href="#">Reports</a></li> 
     <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Messages<span class="caret"></span></a> 
    <ul class="dropdown-menu"> 
      <li><a href="#">1</a></li> 
      <li><a href="#">2</a></li> 
     </ul> 
     </li>  
    </ul> 
    <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">Sign Out</a></li> 
    </ul> 
    </div> 

    </div> 
    <div> 
</div> 
</body>

Выезд выведен на край навигационной панели. Справа нет места. То, что я хочу, это иметь те же пространства на другой стороне. Я пробовал создать для него класс css и добавлять поля и дополнения, но он не работает.

источник

2016-04-29 guwop69

У вас есть образ того, что вы хотите для достижения, потому что я действительно не получаю то, что вы хотите сделать. – Evochrome

Вывод ссылки находится на краю навигационной панели. Я хочу, чтобы у него были пробелы. – guwop69

Сделайте .navbar a .container и удалите внешний контейнер div.

<div class="navbar navbar-default container">

Demo:. http://codeply.com/go/vb5UPooA15

источник

2016-04-29 15:17:33 ZimSystem

Добавить Div = "контейнер" на второй строке после «NavBar NavBar-умолчанию, который будет содержать Navbar и набор полей

источник

2016-04-29 15:21:01

Попробуйте это:

HTML

<ul class="nav navbar-nav navbar-right"> 
     <li><a class="signout" href="#">Sign Out</a></li> 
    </ul>

CSS

ul.nav.navbar-nav.navbar-right > li > a{ 
    margin-right: 30px; 
}

Exemple:

https://jsfiddle.net/w776Lq1u/7/

источник

2016-04-29 15:21:48 Sylvain

Если добавить разборную часть навигационной панели добавляет отступы вы хотите. Прямо сейчас, когда вы переходите на размеры экрана для мобильных устройств, ваши навигационные ссылки отображаются как блок, и нет кнопки быстрого реагирования. Измените размер окна браузера на меньшую ширину, чтобы узнать, о чем я говорю. Если вы добавите навигационную панель-коллапс и кнопку свернуть, тогда сбой на панели навигации добавит требуемое дополнение, а также сделает вашу навигационную панель чувствительной. Таким образом, ваша разметка будет выглядеть следующим образом:

Вот скрипка, чтобы показать вам, как это должно выглядеть Fiddle

<div class="container"> 
    <div class="navbar navbar-default"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#">Logo</a> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false" aria-controls="navbar"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
    </div> 
    <div class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav"> 
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Profile<span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">1</a></li> 
       <li><a href="#">2</a></li> 
       <li><a href="#">3</a></li> 
       <li><a href="#">4</a></li> 
      </ul> 
      </li> 
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Comments<span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">1</a></li> 
       <li><a href="#">2</a></li> 
       <li><a href="#">3</a></li> 
       <li><a href="#">4</a></li> 
      </ul> 
      </li> 
      <li><a href="#">Reports</a></li> 
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Messages<span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">1</a></li> 
       <li><a href="#">2</a></li> 
      </ul> 
      </li>  
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
      <li><a href="#">Sign Out</a></li> 
     </ul> 
    </div> 
    <div> 
</div>

источник

2016-04-29 15:24:25

Я мог бы добиться того, что вы хотите с настройкой нулевого запаса для правой навигационной панели. Сделав это, я просто «сломал» Плавучая элемента, и он автоматически получил выровненный по правой руке, левая рука делает:

<ul class="nav navbar-nav navbar-right no-margin"> 
    <li><a href="#">Sign Out</a></li> 
</ul> 

.no-margin { 
    margin: 0; 
}

Live Demo

источник

2016-04-29 15:28:26 Aer0

Bootstrap navigation bar: navbar-right

ответ

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