Twitter bootstrap 3 navbar navbar-droit de l'extérieur de navbar-effondrement

Dans Twitter bootstrap 2.3.2 je peux avoir quelque chose comme:
http://jsfiddle.net/aQwUZ/3/

<div class="navbar navbar-inverse navbar-fixed-top">

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

                <a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
                <a href="#" class="brand">BRAND</a>
                <ul class="nav  pull-right">
                  <li>
                    <a href="#">Fixed Link</a>
                  </li>
                </ul>

                <div class="nav-collapse">
                    <ul class="nav">
                        <li><a href="#">L1</a></li>
                        <li><a href=#">L2</a></li>
                    </ul>
                </div>

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

Un twitter bootstrap barre de navigation, où dans les mobiles sensibles, "Liaison Fixe" rester visible dans l'en-tête.

Maintenant, dans le bootstrap 3, après la mise à niveau de mon code, je ne peux avoir:
http://jsfiddle.net/EC3Ly/4/

<nav 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="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">BRAND</a>
                </div>
                <ul class="nav navbar-nav navbar-right">
                          <li>
                            <a href="#">Fixed Link</a>
                          </li>
                </ul>
                <div class="navbar-collapse collapse">

                    <ul class="nav navbar-nav">
                         <li><a href="#">L1</a></li>
                        <li><a href=#">L2</a></li>
                    </ul>

                </div>

            </div>
</nav>

dans mobile responsive vue, je reçois 2 lignes...
J'ai essayé de les envelopper dans une "navbar-d'en-tête de nœud" http://jsfiddle.net/EC3Ly/5/ ou dans la première "navbar-d'en-tête", sans succès.

Qu'ai-je manqué?

Merci,

Alexandre

OriginalL'auteur heralight | 2013-09-04

  1. 10

    Les deux lignes dans la barre de navigation mobile sont causés par la clearfix de la navbar-d'en-tête:

    .navbar-header {
  .clearfix();

  @media (min-width: @grid-float-breakpoint) {
    float: left;
  }
}

    Vous pouvez utiliser les media queries et css pour annuler cette clearfix (et ajouter une nouvelle avant l'effondrement liste déroulante)

    .navbar-right {float: right !important;}

@media(max-width:767px)
{
    .navbar-right {margin-right:20px;}
    .navbar-header:after 
    {
    clear: none;
    }
    .navbar-nav.navbar-right > li { float: left; }

    .navbar-collapse:before {clear:both;}

    .navbar-collapse {overflow-y: hidden;}
    .navbar-collapse.in {overflow-y: visible;}
    .navbar{border-color: #101010; border-width: 0 0 1px;}
    .navbar-collapse.in > ul {border-color: #101010; border-top:1px double;}
}

}

    démo: http://bootply.com/82366

    Les requêtes de média aussi ajouter un flotteur droit pour la barre de navigation à droite sur les petits écrans. Pour prendre ce code en production, vous peut-être de corriger les frontières et possible la barre de navigation css transisions trop.

    OriginalL'auteur Bass Jobsen

  2. 14

    J'ai connu le même problème avec BS3, et la seule façon que j'ai trouvée pour le résoudre, il a été d'utiliser une combinaison de pull-left et pull-right

    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header pull-left">
      <a class="navbar-brand" href="#">BRAND</a>
    </div>
    <div class="navbar-header pull-right">
      <ul class="nav navbar-nav pull-left">
        <li>
          <a href="#">Fixed Link</a>
        </li>
      </ul>
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <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><a href="#">L1</a></li>
        <li><a href="#">L2</a></li>
      </ul>                    
    </div>
  </div>
</nav>

    De travail de démonstration: http://bootply.com/78856

    J'ai aussi essayer avec pull-gauche et tirez droit, mais cette solution briser certains comportement en vue de téléphone portable: _ "Liaison Fixe" ne peut pas avoir une marge à droite et lorsque ce nœud est le nœud liste déroulante, il tourne très mal.
    J'ai dû remplacer manuellement le bootstrap déroulante des styles pour .navbar-nav .open .dropdown-menu et .navbar-nav .open .dropdown-menu > li > a
    Si vous avez plusieurs liens fixes qu'ils mettent sur le dessus de l'un de l'autre lorsque s'est effondré.

    OriginalL'auteur Zim

  3. 0

    Le problème est avec le point où la navbar s'effondre. Par défaut, Bootstrap s'effondre à 768px. Si vous augmentez, votre navbar va s'effondrer tôt et que le problème va disparaître.

    La meilleure façon de le faire est de personnaliser votre fichier d'amorçage et de changer le @grid-float-breakpoint à 850px (ou de n'importe quelle taille que vous avez besoin). Vous pouvez facilement personnaliser bootstrap 3 de http://getbootstrap.com/customize/?id=9720390

    Espère que cette aide.

    Merci, Lucian. Je suis nouveau sur Pile 🙂

    OriginalL'auteur RemusT

  4. 0

    J'ai résolu de cette façon. Juste après la marque de l'ajout de deux nouvelles lignes avec la même classe et une classe supplémentaire.

            <!-- Branding Image -->
        <a class="navbar-brand" href="{{ url('/') }}">Home</a>
        <!-- Fake branding to avoid breaking up navbar -->
        <a class="navbar-brand navbar-brand-fake">Item 1</a>
        <a class="navbar-brand navbar-brand-fake">Item 2</a>

    Ajouter ceci à votre fichier css:

    a.navbar-brand-fake {
    font-size: 15px;
    line-height: 21px;
    margin-left: 2px !important;
}

    La maison, le Point 1 et le Point 2 restent dans la barre de navigation lorsque le redimensionnement et la barre de navigation ne se cassera pas.

    OriginalL'auteur Erhnam