Meilleure façon d'utiliser Bootstrap 3 Navbar sans effondrement réactif

j'essaie de créer une Navbar simple dans Bootstrap 3 qui ne s'effondre pas - responsive n'est pas nécessaire ici parce que nous avons juste un titre simple sur le bouton gauche + à droite.

mon but est que les boutons titre + apparaissent toujours de la même façon pour toutes les résolutions. Quelque chose comme ceci:

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

    <form class="navbar-form navbar-right">
        <button class="btn btn-default">Button 1</button>
        <button class="btn btn-default">Button 2</button>
    </form>

    <a class="navbar-brand" href="#">Title Here</a>

</div>

j'ai essayé de nombreuses combinaisons de l' documentation. Et ce post explique comment utiliser la nouvelle .nav-header classes. J'ai essayé de dupliquer les éléments à l'intérieur .nav-header-et a également essayé de passer outre les styles de requête BS3 media.

y a-t-il un moyen plus facile d'utiliser la barre de navigation sans s'effondrer?

27
demandé sur Ender2050 2013-08-17 23:23:50

2 réponses

Le mieux que j'ai pu trouver est d'utiliser 2 navbar-header conteneurs, puis utiliser pull-left et pull-right puisqu'ils ne sont liés à aucune demande médiatique..

<div class="navbar navbar-fixed-top">
    <div class="navbar-header pull-left">
      <a class="navbar-brand" href="#">Title Here</a>
    </div>
    <div class="navbar-header pull-right">
      <button type="button" class="btn btn-default navbar-btn">Button 1</button>
      <button type="button" class="btn btn-default navbar-btn">Button 2</button>
    </div>
</div>

Démo sur Bootply: http://bootply.com/74912

55
répondu Zim 2013-08-17 20:03:45

dans mon cas, j'ai seulement utilisé le navbar-header et rien d'autre.

fondamentalement, l'en-tête navbar m'aiderait facilement à obtenir tous les CSS d'en-tête là. À l'intérieur, j'ai ajouté un conteneur et j'ai joué avec mes options pour un cas similaire au vôtre.

    <nav class="navbar navbar-default navbar-fixed-top" id="transient-header">
        <div class="container clearfix">
            <div class="transient-header-block clearfix">
                <h1 class="hide" href="/" style="color: #fff;">Primary</h1>
                <a class="navbar-brand" href="/">{{> svgs/logos/_white_symbol}}</a>
                <div class="pull-right price">
                    <a href="#" class="btn btn-white-border contact-modal" href="#contactModal">
                        {{> svgs/_white_rupee_icon}}
                        {{product.price}}
                    </a>
                </div>
            </div>
        </div>
    </nav>
1
répondu ktkaushik 2016-04-11 09:55:56