Modifier le point d'arrêt Réduire dans Bootstrap 3.0
S'il vous plaît, aidez-moi à changer lorsque ma barre de navigation est réduite ou s'il existe un moyen quelconque de la rendre réactive, comme si vous utilisiez une petite taille!
c'est mon code:
<div style="background-color:#e2e2e2; padding-bottom:10px;">
</div>
<div class="container">
<div class="col-lg-10 col-lg-Push-1 onhover">
<nav class="navbar-default custom-nav" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-collapse1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="nav-collapse1" style="padding:0px;">
<ul class="nav nav-pills onhover">
<li class="active"><a class="onhover1" href="#">Home</a></li>
<li><a class="onhover1" href="#">Rooms</a></li>
<li><a class="onhover1" href="#">Events</a></li>
<li><a class="onhover1" href="#">Restraunts</a></li>
<li><a class="onhover1" href="#">Gallery</a></li>
<li><a class="onhover1" href="#">Services</a></li>
<li><a class="onhover1" href="#">About</a></li>
<li><a class="onhover1" href="#">Contact</a></li>
</ul>
</div>
</nav>
</div>
</div>
Il existe de nombreuses choses pour changer le point d'arrêt d'effondrement dans le fichier CSS, vous auriez besoin d'une TRES bonne gestion du premier design responsive mobile pour le faire OR utiliser le MOINS, mais le moyen le plus rapide est de visiter:
http://getbootstrap.com/customize/
Et entrez le point d'arrêt souhaité dans le champ @ grid-float-breakpoint. Les choix sont les points d'arrêt des requêtes de média répertoriés @ screen-sm-min est l'endroit où il est utilisé par défaut, il était utilisé par défaut à @ screen-md-min (ou à peu près) dans 2.x.
Lisez également la documentation et utilisez les exemples comme points de départ. Aucune des implémentations de la barre de navigation ne figure dans les classes de colonnes, car celles-ci sont utilisées dans .rows et il est supposé être .container directement dans la barre de navigation.
Si vous utilisez Less, allez aux variables. Moins de fichier et modifiez la variable suivante de:
// ** Point auquel la barre de navigation devient décomposée.
@grid-float-breakpoint: @screen-sm-min;
à:
@grid-float-breakpoint: @screen-md;
Cela ferait en sorte que le nav en train de s’effondrer fonctionne avec la taille d’une tablette portrait.
Pour ceux qui pourraient en avoir besoin, voici ce que j'ai fait.
@media only screen and (min-width: 500px) {
.collapse {
display: block;
}
.navbar-header {
display: none;
}
}
@media only screen and (max-width: 500px) {
.collapse {
display: none;
}
.navbar-header {
display: block;
}
}
Donc, ce que j'ai fait était de cacher le bouton bascule mobile tout en affichant mon menu sur cette largeur spécifique et inversement lorsque la largeur est inférieure à 500 pixels.
Pour ceux qui cherchent dans le SASS,
Assurez-vous simplement que le "$ grid-float-breakpoint" est prioritaire avant votre importation bootstrap.
$grid-float-breakpoint: 992px;
Est comment j'ai changé le mien.
Certaines réponses à cette question prétendent que vous pouvez remplacer les modifications CSS d'amorçage sans transpiler le LESS en CSS (en utilisant Grunt ou un autre transpiler). Le diff ci-dessous montre les modifications que vous auriez besoin de faire manuellement pour changer simplement @grid-float-breakpoint de @screen-sm-min (valeur par défaut) à @screen-lg-min.
Il y a trop de modifications à faire manuellement - toutes ces modifications CSS pour une variable! Mieux vaut transpiler LESS avec Grunt et le faire correctement.
Ou utilisez le service Twitter pour générer un fichier si vous ne souhaitez pas configurer Grunt: http://getbootstrap.com/customize/
diff --git a/node_modules/bootstrap/dist/css/bootstrap.css b/node_modules/bootstrap/dist/css/bootstrap.css
index 66bf005..09bdb1c 100644
--- a/node_modules/bootstrap/dist/css/bootstrap.css
+++ b/node_modules/bootstrap/dist/css/bootstrap.css
@@ -1886,7 +1886,7 @@ dd
{
margin-left: 0;
}
-@media (min-width: 768px)
+@media (min-width: 1200px)
{
.dl-horizontal dt
{
@@ -4816,7 +4816,7 @@ tbody.collapse.in
margin-bottom: 2px;
}
-@media (min-width: 768px)
+@media (min-width: 1200px)
{
.navbar-right .dropdown-menu
{
@@ -5516,14 +5516,14 @@ select[multiple].input-group-sm > .input-group-btn > .btn
border: 1px solid transparent;
}
-@media (min-width: 768px)
+@media (min-width: 1200px)
{
.navbar
{
border-radius: 4px;
}
}
-@media (min-width: 768px)
+@media (min-width: 1200px)
{
.navbar-header
{
@@ -5547,7 +5547,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn
{
overflow-y: auto;
}
-@media (min-width: 768px)
+@media (min-width: 1200px)
{
.navbar-collapse
{
@@ -5598,7 +5598,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn
margin-right: -15px;
margin-left: -15px;
}
-@media (min-width: 768px)
+@media (min-width: 1200px)
{
.container > .navbar-header,
.container-fluid > .navbar-header,
@@ -5615,7 +5615,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn
border-width: 0 0 1px;
}
-@media (min-width: 768px)
+@media (min-width: 1200px)
{
.navbar-static-top
{
@@ -5630,7 +5630,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn
right: 0;
left: 0;
}
-@media (min-width: 768px)
+@media (min-width: 1200px)
{
.navbar-fixed-top,
.navbar-fixed-bottom
@@ -5671,7 +5671,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn
{
display: block;
}
-@media (min-width: 768px)
+@media (min-width: 1200px)
{
.navbar > .container .navbar-brand,
.navbar > .container-fluid .navbar-brand
@@ -5712,7 +5712,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn
{
margin-top: 4px;
}
-@media (min-width: 768px)
+@media (min-width: 1200px)
{
.navbar-toggle
{
@@ -5730,7 +5730,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn
padding-top: 10px;
padding-bottom: 10px;
}
-@media (max-width: 767px)
+@media (max-width: 1199px)
{
.navbar-nav .open .dropdown-menu
{
@@ -5761,7 +5761,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn
background-image: none;
}
}
-@media (min-width: 768px)
+@media (min-width: 1200px)
{
.navbar-nav
{
@@ -5863,7 +5863,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn
top: 0;
}
}
-@media (max-width: 767px)
+@media (max-width: 1199px)
{
.navbar-form .form-group
{
@@ -5874,7 +5874,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn
margin-bottom: 0;
}
}
-@media (min-width: 768px)
+@media (min-width: 1200px)
{
.navbar-form
{
@@ -5925,7 +5925,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn
margin-top: 15px;
margin-bottom: 15px;
}
-@media (min-width: 768px)
+@media (min-width: 1200px)
{
.navbar-text
{
@@ -5935,7 +5935,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn
margin-left: 15px;
}
}
-@media (min-width: 768px)
+@media (min-width: 1200px)
{
.navbar-left
{
@@ -6020,7 +6020,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn
color: #555;
background-color: #e7e7e7;
}
-@media (max-width: 767px)
+@media (max-width: 1199px)
{
.navbar-default .navbar-nav .open .dropdown-menu > li > a
{
@@ -6139,7 +6139,7 @@ fieldset[disabled] .navbar-default .btn-link:focus
color: #fff;
background-color: #080808;
}
-@media (max-width: 767px)
+@media (max-width: 1199px)
{
.navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header
{
L'effondrement peut s'avérer gênant si vous avez une barre de menus large. Vous devez modifier les requêtes de support à l'intérieur du fichier bootstrap.css. Cela peut être trouvé
@media (min-width: XXpx) {
.navbar-header {
float: left;
}
}
Vous devriez changer ceci et certains autres tels que .collapse pour améliorer sa réactivité à votre site Web. De plus, votre code HTML convient, mais cela ne l’affecte pas vraiment.