web-dev-qa-db-fra.com

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

J'essaie de créer une simple barre de navigation dans Bootstrap 3 qui ne s'effondre pas - réactif n'est pas nécessaire ici parce que nous avons juste un titre simple à gauche + bouton à droite.

Mon objectif est que les boutons title + apparaissent toujours de la même manière pour toutes les résolutions. Quelque chose comme ça:

<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 la documentation . Et ce post décrit comment utiliser les nouvelles classes .nav-header . J'ai essayé de dupliquer les éléments à l'intérieur de .nav-header - et j'ai également essayé de remplacer les styles de requête de média BS3.

Existe-t-il un moyen plus simple d'utiliser la barre de navigation sans s'affaisser?

twitter-bootstraptwitter-bootstrap-3navbar
29
Ender2050

La meilleure façon que j'ai pu trouver est d'utiliser 2 navbar-header conteneurs, puis utilisez pull-left et pull-right car ils ne sont liés à aucune requête multimédia réactive.

<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

57
Zim

Dans mon cas, je n'ai utilisé que le navbar-header et rien d'autre.

Fondamentalement, l'en-tête navbar m'aiderait à obtenir facilement tous les CSS d'en-tête là-dedans. À l'intérieur, j'ai ajouté un conteneur et joué avec mes options pour un boîtier 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
ktkaushik