web-dev-qa-db-fra.com

La barre de droite de la barre de navigation Bootstrap 3 n’est pas censée être de -15 pixels

Sur ma page Web, j'ai une barre de navigation Bootstrap 3:

<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>

Le problème est que la navigation est trop proche du bord de l'écran. Si je supprime navbar-fixed-top de la barre de navigation, cela fonctionne comme je le souhaite. 

Des allusions?

htmlcsstwitter-bootstrap-3
19
Igor Filippov

Utiliser .container-fluid à partir de 3.1.1.

La structure n'est pas correcte. .navbar-right va sur le conteneur .collapse pas sur le 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>
15
Christina

J'ai fini par imposer ce qui suit:

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

Mais peut-être qu'il y a une autre solution? 

13
Igor Filippov

Il est cassé et ne résoudra pas in 3.x. Pirate-le.

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

La solution à cela pourrait être

 <!-- 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>

Cela a fonctionné pour moi.

2
Shivek Parmar

Je ne vois vraiment pas pourquoi vous auriez deux .navbar-nav.navbar-right. Enveloppez simplement les navs dans .navbar-right à la place.

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

J'ai exactement le même problème aujourd'hui! D'après Bootstrap, la doc <ul class="nav navbar-nav navbar-right"> est correcte.

Comme vous, j’ai résolu le problème en réglant le paramètre nav navbar-nav navbar-right margin-right à 0px sans remarquer d’effets indésirables.

Notez que la valeur margin-right de .navbar-text .navbar-right: dernier-enfant est égale à 0px tandis que .navbar-nav .navbar-right: dernière valeur-margin-right de-enfant est -15px ... Bizarre?

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

0
Jean-Luc

Si vous avez un problème avec 

marge droite: -15px;

dans .navbar-right, puis ajoutez simplement vos styles css

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

et si cela ne fonctionne toujours pas, effacez l'historique de votre navigateur lorsque votre site Web était en cours d'exécution et relancez-le. Ça marche :)

0
gutkol

Ma solution pas si élégante, mais fait le travail très rapidement, ajouter un dernier élément de la liste;

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