Twitter Bootstrap - pleine largeur de la barre de navigation
Suivant l'exemple de la TUBERCULOSE, j'ai une barre de navigation qui est marqué comme suit:
<div class="container">
<div class="navbar">
<div class="navbar-inner">
<!-- nav bar items here -->
</div>
</div>
</div>
Je voudrais étendre sur toute la largeur de l'écran et ne pas avoir des coins arrondis, comme statique haut style de la barre de navigation.
Je n'arrive pas à trouver comment faire cela dans la TUBERCULOSE. Si il n'y a pas un sens, ce que CSS aurais-je besoin de remplacer la TUBERCULOSE et pour ne pas casser la réactivité?
- J'ai réalisé hier soir qu'il y avait une mauvaise faute de frappe dans la solution, je vous ai fourni. Elle est désormais fixée à ma réponse ci-dessous.
InformationsquelleAutor StackOverflowNewbie | 2012-10-26
Vous devez vous connecter pour publier un commentaire.
Il suffit de changer la classe d'un contenant à l'-fullwidth comme ceci :
container-fluid
?Ne sais pas si le
navbar-static-top
classe était disponible avant la version 2.2.2, mais je pense que vous pouvez atteindre votre objectif avec les éléments suivants:J'ai mis en place un jsFiddle comme un exemple.
Mettre la barre de navigation de votre conteneur:
EDIT:
Voici celle que j'ai fait avec réactif barre de navigation. Le code s'adapte le corps du document:
.container
à l'intérieur d'une barre de navigation..container
est pour plusieurs lignes, de sorte que vous ne vraiment besoin une fois à droite après lebody
tag ou donc. Vous devriez être en utilisant des lignes pour d'autres éléments comme la barre de navigation, en-tête, corps, etc.Je suis très en retard à la fête, mais cette réponse tire vers le haut le haut dans les résultats de recherche Google.
Bootstrap 3 a une réponse à cette fonction, réglez votre conteneur div dans votre barre de navigation pour
container-fluid
et il va tomber à la largeur de l'écran.Comme suit:
Vous avez besoin de pousser le conteneur en bas de la barre de navigation.
Veuillez trouver mon travail violon ici http://jsfiddle.net/meetravi/aXCMW/1/
Il suffit de remplacer
<div class="container">
avec<div class="container-fluid">
, qui est le conteneur, sans marges sur les deux côtés.Je pense que c'est la meilleure solution car elle permet d'éviter certaines inutile le remplacement et rend l'utilisation de classes intégrées, c'est propre.
Mettre votre
<nav>
élément de la<div class='container-fluid'>
.Ex :-
HTML:
Vous pouvez remplacer un peu de css
La
!important
est nécessaire seulement dans le cas où vous lien lebootstrap.css
après votre css personnalisé.Et ajouter votre nav html d'un
.container
body
styles affecter le reste du site, à droite? J'ai vraiment envie d'affecter seulement la barre de navigation. J'ai déjà comme le rembourrage/marges de tout le reste.div.container
, droit? Ainsi, vous pouvez appliquer labody
les styles que vous remplacer dans lediv.containe
, par exemple:.container { padding-left: 10px !important; padding-right: 10px !important; }
Pour enlever les border-radius sur les coins ajouter ce style à votre custom.fichier css
Je sais que je suis un peu en retard à la fête, mais j'ai pu contourner le problème en modifiant le CSS pour avoir la largeur de la durée de 100% et réglage de l/r marges 0px;
Vous devez ajouter le col-md-12 à l'intérieur de vous-barre de navigation. md est pour les pc de bureau .vous pouvez choisir d'autres options de bootstrap de la liste des options . 12 col-md-12 est de largeur .Si vous voulez de la moitié de la largeur, vous pouvez utiliser 6 au lieu de 12 .pour, par exemple, col-md-6.