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