web-dev-qa-db-fra.com

Comment changer la largeur de la barre de navigation/conteneur? Bootstrap 3

La largeur par défaut de ma barre de navigation est trop large 1170px. Je voudrais le réduire à 940px - mais je veux garder la réactivité.

J'ai essayé de changer la largeur du conteneur en CSS et ça a l'air bien avec un grand navigateur, mais le reste de la page se défait lors de l'affichage pour les tailles mobiles.

Est-ce la bonne propriété ou y a-t-il autre chose?

@media (min-width: 1200px) {
  .container {
  max-width: 1170px;
}

Voici mon code de barre de navigation

<div class="navbar navbar-inverse navbar-fixed-top">
      <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="#">Site Name</a>
        </div>

        <div class="collapse navbar-collapse">

          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#shop">Shop</a></li>
            <li><a href="#showcase">Showcase</a></li>
            <li><a href="#help">Help</a></li>
            <li><a href="#my account">My Account</a></li>
            <li><a href="#cart">Cart <span class="glyphicon glyphicon-shopping-cart"></span></a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
  </div>
csstwitter-bootstrap
41
Mark

Je viens de résoudre ce problème moi-même. Vous étiez sur la bonne voie.

@media (min-width: 1200px) {
    .container{
        max-width: 970px;
    }
}

Ici, nous disons: Dans les fenêtres 1 200 px ou plus, définissez la largeur maximale du conteneur sur 970 px. Cela écrasera la classe standard qui définit actuellement max-width sur 1170px pour cette plage.

NOTE: Assurez-vous d'inclure ceci APRES le fichier bootstrap.css (tout le monde a commis cette petite erreur dans le passé).

En espérant que ça aide, bonne chance!

53
Jose Browne

La largeur du conteneur tombera à 940 pixels pour les fenêtres de moins de 992 pixels. Si vous vraiment ne voulez pas de conteneurs d’une largeur supérieure à 940 pixels, accédez à la page Bootstrap personnaliser et définissez @container-lg-desktop sur @container-desktop ou 940px codé en dur.

2
Martin Bean

Le .navbar-static-top que vous utilisez force votre navbar à devenir toute la largeur. Supprimez cette classe et vous obtiendrez une navbar redimensionnable. Ensuite, vous pouvez l’envelopper dans un span# de la taille souhaitée.

<div class="container">
<div class="row">
    <div class="span6 offset3">
        <div class="navbar">
            ...
        </div>
    </div>
</div>

1
Lawrence Oputa

Bonjour ce travail vous essayez! dans votre cas est .navbar-fixed-top {}

.navbar-fixed-bottom{
    width:1200px;
    left:20%;
}
1
Laed

Si vous avez des résolutions/tailles d’écran plus dynamiques, au lieu de coder en dur la taille en pixels, vous pouvez modifier la largeur en pourcentage de la largeur du support.

@media (min-width: 1200px) {
    .container{
        max-width: 70%;
   }
}
0
Akshar

La meilleure façon de le faire est de changer la largeur du personnaliseur en ligne ici:

http://getbootstrap.com/customize/

téléchargez la source recompilée, écrasez le répertoire d'amorçage existant et rechargez (attention au cache du navigateur !!!)

Toutes vos modifications seront conservées dans le fichier de configuration .json

Pour appliquer à nouveau toutes les modifications, il suffit de télécharger le fichier json et vous êtes prêt à commencer.

0
Gianluca Ghettini

juste simple:

.navbar{
    width:65% !important;
    margin:0px auto;
    left:0;
    right:0;
    padding:0;
}

ou,

.navbar.navbar-fixed-top{
    width:65% !important;
    margin:0px auto;
    left:0;
    right:0;
    padding:0;
}

J'espère que cela fonctionne (au moins, pour les futurs chercheurs)

0
Herman Nz