Bootstrap 3 Навигационная панель правый край не должен быть -15px

В моей веб-страницы У меня есть Bootstrap 3 Navbar:Bootstrap 3 Навигационная панель правый край не должен быть -15px

<body> 

<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <div class="navbar-header"> 
    <a class="navbar-brand" href="#">Teachlab</a> 
    </div> 

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 

    <ul class="nav navbar-nav navbar-right"> 
     <li><%= link_to "Home", '#' %></li> 
     <li><%= link_to "Help", '#' %></li> 
     <li><%= link_to "Sign in", '#' %></li> 
    </ul> 
    </div> 
</nav> 

<div class="container"> 
    <%= yield %> 
</div> 

</body>

Проблема заключается в том, что навигация близко к краю экрана. Если я удалю navbar-fixed-top из панели навигации, он работает так, как я хочу.

Любые подсказки?

источник

2013-12-06 Igor Filippov

Как насчет удаления navbar-fixed-top? Или добавление некоторого дополнительного поля в CSS для этого класса? – Kenneth

Осмотрите CSS и отлаживайте применяемые к нему правила CSS. Если удаление '.navbar-fixed-top' устраняет проблему, это скорее всего определение, применяемое к этому классу, который вы должны либо удалить, либо переопределить. – Axel

@ Kenneth Я просто блуждал, если это ошибка новичка. –

Я закончил с наиважнейшим следующим:

.navbar-nav.navbar-right:last-child { 
    margin-right: 0; 
}

Но может быть, есть другое решение?

источник

2013-12-06 19:42:38

Действительно хороший ответ, спас мне жизнь. Спасибо –

Использование .контейнер-жидкость по состоянию на 3.1.1.

Неправильная конструкция. .navbar-right идет в контейнер .collapse, а не на ul.

SAMPLE: http://jsbin.com/eQIROsE/2/edit

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

источник

2013-12-07 00:44:36 Christina

Ты уверен в этом? Если вы посмотрите на документы (http://getbootstrap.com/components/#navbar-default) и на источник самого http://getboostrap.com, класс .navbar-right отображается на ul. –

Если вы используете контейнер .container, который является истинным, но у него нет .container, вы будете придерживаться его при крахе или полностью нажимаете на край. – Christina

Ваш комментарий был достаточно для меня, чтобы выяснить еще более сложную проблему, но решение должно работать и здесь. Короче говоря, вы можете просто вложить свой заголовок навигатора и сестра в контейнер (я использую контейнер для жидкости) –

Я действительно не могу понять, почему вы хотите иметь два .navbar-nav.navbar-вправо. Просто оберните навигаторы в .navbar-right вместо этого.

<div class="navbar-right"> 
    <ul class="nav navbar-nav">...</ul> 
    <ul class="nav navbar-nav">...</ul> 
</div>

источник

2014-02-02 16:36:47 Kepro

У меня точно такая же проблема сегодня! В соответствии с Bootstrap doc <ul class="nav navbar-nav navbar-right"> верен.

Как и вы, я решил проблему, установив навигационный navbar-nav navbar-right margin-right на 0px, не заметив нежелательных эффектов.

Обратите внимание, что запас правого значение .navbar-текста .navbar-направо: последний ребенок 0px пока .navbar-Nav .navbar-право: последний ребенок запас правое значение -15px ... Необычно?

https://github.com/twbs/bootstrap/issues/13325

источник

2014-04-12 22:48:25

Решение этой проблемы может быть

<!-- Fixed navbar --> 
<div class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <div class="container-fluid"> 
    <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="navbar-collapse collapse"> 

     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="../navbar/">Default</a></li> 
     <li><a href="../navbar-static-top/">Static top</a></li> 
     <li class="active"><a href="./">Fixed top</a></li> 
     </ul> 
    </div><!--/.nav-collapse --> 
    </div> 
</div>

Он работал для меня.

источник

2014-06-22 05:24:19

Мое не очень изящное решение, но делает работу очень быстро, добавляет последний элемент списка;

<li><span>&nbsp;&nbsp;</span></li>

источник

2015-03-07 14:32:56 Totoro53

Это сломаны и won't fix в 3.x. Взломайте его.

.navbar-right { 
    margin-right: 0px; 
}

источник

2017-04-18 10:43:32 Kolyunya

Если у вас есть проблемы с

маржинальной-право: -15px;

в.Navbar направо, то просто добавьте в ваши стили CSS

.navbar-right { 
    margin-right: 0px; 
}

и если это все еще не работает очистить свой браузер от всей истории, когда ваш webstie был запущен и отладки его снова. Это работает :)

источник

2017-08-20 14:52:59 gutkol

Bootstrap 3 Навигационная панель правый край не должен быть -15px

ответ

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