web-dev-qa-db-fra.com

Empêcher le menu de s’effondrer dans une requête multimédia CSS avec écran à 768px

J'essaie de faire un site en utilisant Twitter bootstrap. Je reçois relativement moins de menus, ce qui convient donc également à l'affichage de 768px. Mais dans l'amorçage par défaut, le menu se réduit à l'aide de requêtes multimédia. Je ne suis pas capable d'empêcher ce comportement.

The menu when not collapsed

Then menu collapses ones width less than 768px

C'est mon html

<div class="row">
    <div class="span3 logo"><h1><img src="img/logo.png" /></h1></div>
    <div class="span9">

        <div class="navbar">
          <div class="navbar-inner">
            <div class="container">
         <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
              <div class="nav-collapse">
                <ul class="nav nav-pills">
                  <li><a href="#">Home</a> </li>
                  <li><a href="#">Services</a> </li>
                  <li><a href="#">Portfolio</a> </li>
                  <li><a href="#">Contact Us</a> </li>
                </ul>
              </div>
            </div>
          </div>
        </div>



    </div>
    </div>

Je sais que cela a quelque chose à voir avec la requête de média dans le bootstrap, mais impossible à comprendre.

csstwitter-bootstrapmedia-queriesresponsive-design
26
esafwan

Vous voudrez peut-être lire la section: Utilisation des requêtes de support sur le site de démarrage: http://getbootstrap.com/2.3.2/scaffolding.html#responsive ( Bootstrap 2.3.2) http://getbootstrap.com/getting-started/#disable-responsive } _ (Bootstrap 3)

Vous voudrez peut-être utiliser les requêtes de média appropriées pour remplacer les styles ajoutés par le bootstrap lorsque votre fenêtre d'affichage sera réduite.

  // Landscape phones and down
  @media (max-width: 480px) { ... }

  // Landscape phone to portrait tablet
  @media (max-width: 768px) { ... }

  // Portrait tablet to landscape and desktop
  @media (min-width: 768px) and (max-width: 980px) { ... }

  // Large desktop
  @media (min-width: 1200px) { .. }

Si vous ne voulez pas que la barre de navigation se réduise, supprimez le mot "replier" du nom de la classe. Vous devriez probablement vous débarrasser de:

<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

En bref, jetez un coup d'œil à la documentation, une section couvrant cette chose exacte intitulée 'Variation réactive facultative' est ici: http://getbootstrap.com/2.3.2/components.html#navbar (Bootstrap 2.3.2)

16
Galaxy

Vous pouvez personnaliser Twitter Bootstrap css compiler il à partir de fichiers scss sass-Twitter-bootstrap et régler $navbarCollapseWidth dans _variables.scss à la valeur souhaitée ...

Modifier

Comme @Accipheran l'a indiqué dans les commentaires, pour Bootstrap 3.x, le nom de la variable à définir est $grid-float-breakpoint.

32
pine3ree

Cela a bien fonctionné pour moi:

.nav-collapse, .nav-collapse.collapse {
    overflow: visible;
}   
.navbar .btn-navbar {
    display: none;
}
9
Matt Jackson

En lisant les réponses, je pense que vous parlez de Bootstrap version 2. Peut-être que quelqu'un cherchant une réponse à Bootstrap 3 arrivera ici. Cette réponse est pour vous!

  1. Aller à page de personnalisation Bootstrap
  2. redéfinissez la valeur @ grid-float-breakpoint pour quelque chose codé en dur (par exemple 520px) ou pour une taille d'écran plus petite comme @ screen-xs-min
  3. Appuyez sur le bouton en bas de la page pour recompiler les fichiers CSS
  4. remplacez vos fichiers bootstrap.css et bootstrap-min.css par ceux du fichier Zip téléchargé.
8
neves

trouver une variable:

@ grid-float-breakpoint

qui est réglé sur @ screen-sm, vous pouvez le modifier en fonction de vos besoins.

Si vous substituez le fichier moins fournisseur, définissez la variable sur 0px, par exemple:

@ grid-float-breakpoint: 0px;

2
Andreas Ek

Cet exemple provient du site officiel: http://getbootstrap.com/examples/non-responsive/

Les modifications sont dans non-responsive.css mais les parties importantes relatives à .navbar sont les suivantes:

body {
    padding-top: 70px;
    padding-bottom: 30px;
}
.page-header {
    margin-bottom: 30px;
}
.page-header .lead {
    margin-bottom: 10px;
}
.navbar-collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
}
.navbar-nav {
    float: left;
    margin: 0;
}
.navbar-nav > li {
    float: left;
}
1
Alastair

Si vous souhaitez désactiver complètement la barre de navigation qui se réduit, ajoutez cette variable dans votre fichier LESS personnalisé:

@grid-float-breakpoint: 0px;
1
Fred K

Si tout ce que vous voulez faire, c'est que la navigation ne soit pas réduite jusqu'à ce qu'elle atteigne une valeur inférieure, le moyen le plus simple consiste à accéder à la page de personnalisation du bootstrap Twitter , à remplacer le @navbarCollapseWidth par la valeur souhaitée et à télécharger le package. . Terminé.

Si vous souhaitez personnaliser au-delà de ce que permet cette page, vous devrez remplacer ou personnaliser comme décrit dans les autres réponses.

1
Ross Hambrick

Voici ce que j'ai utilisé pour bootstrap 3.3.4. C'est un hack, mais ce n'est pas non plus un correctif de 2 jours pour refaire le fichier css.

@media (min-width: 768px) and (max-width: 979px) {
  .navbar-header {
    width: 100% !important;
  }
  .navbar-toggle {
    display: inline-block !important;
    float: right !important;
  }
}

Vous devrez peut-être ajuster les sélecteurs, mais en gros, élargir l'en-tête, puis afficher et faire flotter le bouton à droite.

0
Michael Cole