Ändern Sie den Bootstrap Navi -Kollaps -Bruchpunkt, ohne weniger zu verwenden

StackOverflow https://stackoverflow.com/questions/19827605

Frage

Wenn die Browserbreite unter 768px fällt, wechselt der Navigationsleiste im zusammengebrochenen Modus. Ich möchte diese Breite auf 1000px ändern. Wenn der Browser unter 1000px liegt, wechselt der Navigationsleiste im zusammengebrochenen Modus. Ich möchte dies ohne weniger verwenden, ich benutze Stylus nicht weniger.

Mein Problem ist das gleiche wie in dieser Frage: Bootstrap 3 Navigationssturz

Alle Antworten in diesen Fragen erklären jedoch, wie Sie dies tun, indem Sie weniger variabel ändern. Ich habe nicht mit weniger zu tun, ich verwende Stylus, also möchte ich wissen, wie dies mit Styl oder einer anderen Methode erfolgen kann.

Vielen Dank!

War es hilfreich?

Lösung 2

Sie müssen eine bestimmte schreiben Medienabfrage Aus Ihrer Frage unter 768px wird die Navigationsleiste zusammengebrochen. Wenden Sie sie also über 768px und unter 1000px an, genau so:

@media (min-width: 768px) and (max-width: 1000px) {
   .collapse {
       display: none !important;
   }
}

Dadurch wird der Navigationsabsturz versteckt, bis das Standardauftritt der Bootstrap -Einheit. Wenn die Zusammenbruchklasse die innere Vermögenswerte innerhalb von Navalabstücken umdreht, wird automatisch versteckt, wie es weise, dass Sie Ihr CSS nach gewünschtem Design einstellen müssen.

Andere Tipps

2018 Update

Bootstrap 4

Das Ändern des Naval -Haltepunkts ist in Bootstrap 4 einfacher mit der navbar-expand-* Klassen:

<nav class="navbar fixed-top navbar-expand-sm">..</nav>

  • navbar-expand-sm = Mobiles Menü auf XS -Bildschirmen <576px
  • navbar-expand-md = Mobiles Menü auf SM -Bildschirmen <768px
  • navbar-expand-lg = Mobiles Menü auf MD -Bildschirmen <992px
  • navbar-expand-xl = Mobiles Menü auf LG -Bildschirmen <1200px
  • navbar-expand = Nie das mobile Menü verwenden
  • (no expand class) = Verwenden Sie immer mobiles Menü

Wenn Sie ausschließen navbar-expand-* Das mobile Menü wird bei verwendet all Breiten. Hier ist eine Demo aller 6 Navigationsstaaten: Bootstrap 4 Navi -Beispiel Beispiel

Sie können auch einen benutzerdefinierten Haltepunkt (??? PX) verwenden, indem Sie ein wenig CSS hinzufügen. Zum Beispiel hier ist 1300px ..

@media (min-width: 1300px){
    .navbar-expand-custom {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    .navbar-expand-custom .navbar-nav {
        flex-direction: row;
    }
    .navbar-expand-custom .dropdown-menu {
        position: absolute;
    }
    .navbar-expand-custom .nav-link {
        padding-right: .5rem;
        padding-left: .5rem;
    }
    .navbar-expand-custom > .container {
        flex-wrap: nowrap;
    }
    .navbar-expand-custom .navbar-collapse {
        display: flex!important;
        flex-basis: auto;
    }
    .navbar-expand-custom .navbar-toggler {
        display: none;
    }
}

Bootstrap 4 Brauch Navigations -Breakpoint
Bootstrap 4 Navigh Breakpoint Beispiele

** Bootstrap 3 **

Für Bootstrap 3.3.x hier ist die Arbeiten CSS, um den Navigh -Haltepunkt zu überschreiben. Veränderung 991px In die Pixeldimension des Punktes, an dem die Marine zusammenbricht ...

@media (max-width: 991px) {
  .navbar-header {
      float: none;
  }
  .navbar-left,.navbar-right {
      float: none !important;
  }
  .navbar-toggle {
      display: block;
  }
  .navbar-collapse {
      border-top: 1px solid transparent;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  }
  .navbar-fixed-top {
      top: 0;
      border-width: 0 0 1px;
  }
  .navbar-collapse.collapse {
      display: none!important;
  }
  .navbar-nav {
      float: none!important;
      margin-top: 7.5px;
  }
  .navbar-nav>li {
      float: none;
  }
  .navbar-nav>li>a {
      padding-top: 10px;
      padding-bottom: 10px;
  }
  .collapse.in{
      display:block !important;
  }
}

Arbeitsbeispiel für 991px: http://www.bootply.com/j7xjuae5v6
Arbeitsbeispiel für 1200px: https://www.codeply.com/go/vsyaolzfb4 (mit Suchformular)

HINWEIS: Die oben genannten Funktionen für alles über 768px. Wenn Sie es ändern müssen, um es zu ändern Weniger als 768px das Beispiel für weniger als 768px ist hier.

in Bootstrap3, ändern Sie diese Variable @Grid-Float-Breakpoint zu dem, den Sie brauchen. Der Standardwert beträgt 768px

Endlich herausgefunden, wie man die Zusammenbruchsbreite verändert, indem man mit '@Grid-Float-Breakpoint' bei fummelte http://getbootstrap.com/customize/.

Gehen Sie zu Zeile 2923 in Bootstrap.css (auch min -Version) und ändern Sie @media screen and (min-width: 768px) { zu @media screen and (min-width: 1000px) {

Der Code wird also:

@media screen and (min-width: 1000px) {
  .navbar-brand {
    float: left;
    margin-right: 5px;
    margin-left: -15px;
  }
  .navbar-nav {
    float: left;
    margin-top: 0;
    margin-bottom: 0;
  }
  .navbar-nav > li {
    float: left;
  }
  .navbar-nav > li > a {
    border-radius: 0;
  }
  .navbar-nav.pull-right {
    float: right;
    width: auto;
  }
  .navbar-toggle {
    position: relative;
    top: auto;
    left: auto;
    display: none;
  }
  .nav-collapse.collapse {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }
}

Ich habe dies gerade erfolgreich gemacht, indem ich den folgenden CSS -Code verwendet habe.

@media(max-width:1000px)  {

    .navbar-collapse.collapse {
        display: none !important;
    }

    .navbar-collapse {
        overflow-x: visible !important;
    }

    .navbar-collapse.in {
      overflow-y: auto !important;
    }

    .collapse.in {
      display: block !important;
    }

}

Im Bootstrap 3. Quellcode, Es gibt eine Variable in definiert in variables.less genannt @grid-float-breakpoint Das hat den folgenden hilfreichen Kommentar:

//**Point at which the navbar becomes uncollapsed
@grid-float-breakpoint: @screen-sm-min;

Das Matching @grid-float-breakpoint-max Der Wert wird auf diese minus 1px gesetzt:

//**Point at which the navbar begins collapsing
@grid-float-breakpoint-max: (@grid-float-breakpoint-max - 1);

Lösung:

Also stelle einfach die @grid-float-breakpoint Wert auf 1000px stattdessen und bauen Sie sie um bootstrap.less hinein bootstrap.css:

z.B

@grid-float-breakpoint: 1000px;

Die SASS -Art, Bootstrap -Variablen zu ändern Bootstrap-Sass Github -Seite.

Definieren Sie einfach die Variablen neu, bevor Sie @import Bootstrap:

$grid-float-breakpoint: 1000px;

@import 'bootstrap';

Zusätzlich zu @SKELY Antwort, um zu machen Dropdown -Menüs Fügen Sie in der Navi -Arbeit auch ihre Klassen hinzu, um überschrieben zu werden. Endgültiger Code bellow:

    @media (min-width: 768px) and (max-width: 991px) {
        .navbar-nav .open .dropdown-menu {
            position: static;
            float: none;
            width: auto;
            margin-top: 0;
            background-color: transparent;
            border: 0;
            -webkit-box-shadow: none;
            box-shadow: none;
        }
        .navbar-nav .open .dropdown-menu > li > a {
            line-height: 20px;
        }
        .navbar-nav .open .dropdown-menu > li > a,
        .navbar-nav .open .dropdown-menu .dropdown-header {
            padding: 5px 15px 5px 25px;
        }
        .dropdown-menu > li > a {
            display: block;
            padding: 3px 20px;
            clear: both;
            font-weight: normal;
            line-height: 1.42857143;
            color: #333;
            white-space: nowrap;
        }
        .navbar-header {
            float: none;
        }
        .navbar-toggle {
            display: block;
        }
        .navbar-collapse {
            border-top: 1px solid transparent;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
        }
        .navbar-collapse.collapse {
            display: none!important;
        }
        .navbar-nav {
            float: none!important;
            /*margin: 7.5px -15px;*/
            margin: 7.5px 50px 7.5px -15px
        }
        .navbar-nav>li {
            float: none;
        }
        .navbar-nav>li>a {
            padding-top: 10px;
            padding-bottom: 10px;
        }
        .navbar-text {
            float: none;
            margin: 15px 0;
        }
        /* since 3.1.0 */
        .navbar-collapse.collapse.in { 
            display: block!important;
        }
        .collapsing {
            overflow: hidden!important;
        }
    }

Democode

NAVAHs können .Navbar-Toggler, .navbar-Collapse und .navbar-expand {-sm | -md | -lg | -xl} -Krassen verwenden, um sich zu ändern, wenn sich ihr Inhalt hinter einer Taste zusammenbricht. In Kombination mit anderen Versorgungsunternehmen können Sie problemlos auswählen, wann bestimmte Elemente angezeigt oder ausblenden sollen.

Fügen Sie für Navigationen, die nie zusammenbrechen, die Navbar-Expand-Klasse in der Navigationsleiste hinzu. Für Marine, die immer zusammenbrechen, fügen Sie keine .navbar-Expand-Klasse hinzu.

Zum Beispiel :

<nav class="navbar navbar-expand-lg"></nav>

Das mobile Menü wird im großen Bildschirm angezeigt.

Bezug :https://getbootstrap.com/docs/4.0/components/navbar/

In Bootstrap V4 kann die Navigation früher oder später mit verschiedenen CSS -Klassen zusammengebrochen werden

z.B:

  • Navigations-Toggleable-SM
  • Navig-Togglable-MD
  • Navigations-Togglable-Lg

Mit der Taste für die Navigation:

  • versteckt
  • versteckt
  • versteckt

Das funktionierte für mich Bootstrap3

@media (min-width: 768px) {
    .navbar-header {
          float: none;
      }
      .navbar-toggle {
          display: block;
      }
      .navbar-collapse {
          border-top: 1px solid transparent;
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
      }
      .navbar-collapse.collapse {
          display: none!important;
      }
      .navbar-collapse.collapse.in {
          display: block!important;
      }
      .navbar-nav {
          float: none!important;
          margin: 7.5px -15px;
      }
      .navbar-nav>li {
          float: none;
      }
      .navbar-nav>li>a {
          padding-top: 10px;
          padding-bottom: 10px;
      }
}

Es dauerte eine Weile, um diese beiden herauszufinden:

.navbar-collapse.collapse {
   display: none!important;
}
.navbar-collapse.collapse.in {
   display: block!important;
}

Für Bootstrap 3.3 ist dies der einzige Code, den Sie benötigen:

@media (min-width: 768px) and (max-width: 1000px) {
   .navbar-collapse.collapse {
       display: none !important;
   }
   .navbar-toggle{
        display: block !important;
   }
   .navbar-header{
        float: none;
   }
}

Am besten verwenden Sie einen Port des von Ihnen verwendeten CSS -Prozessors.

Ich bin ein großer Fan von Sass, also benutze ich derzeit https://github.com/thomas-mcdonald/bootstrap-sass

Es sieht so aus, als gäbe es hier eine Gabel für Stylus: https://github.com/acquisio/bootstrap-stylus

Andernfalls ist Such & Ersatz Ihr bester Freund direkt in der CSS -Version ...

Hallo, ich denke, Sie können es mit CSS wie diesem tun. Sie können das Breakpoint -Bootstrap -Menü ändern 

    @media (max-width: 1200px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }

    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important; 
    }
    .navbar-nav>li {
        float: none;
    } 
    .collapse.in{
        display:block !important;
    }
   .navbar-nav .open .dropdown-menu {
       position: static;
       float: none;
       width: auto;
       margin-top: 0;
       background-color: transparent;
       border: 0;
       -webkit-box-shadow: none;
       box-shadow: none;
    }
}

Dies ist der Arbeitscode für mich. (Auch die Dropdown -Navi -Links funktioniert)

@media (max-width: 1199px) {
  .navbar-nav {
    margin: 7.5px -15px;
 }
  .ul-links {
    display: block;
  }
  .navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 20px;
  }  
  .navbar-header {
      float: none;
  }
  .navbar-left,.navbar-right {
      float: none !important;
  }
  .navbar-toggle {
      display: block;
  }

  .navbar-collapse.collapse {
      display: none!important;
      max-height: none;
  }
  .navbar-nav {
      float: none!important; 
  }
  .navbar-nav>li {
      float: none;
  } 
  .collapse.in{
      display:block !important;
  }
 .navbar-nav .open .dropdown-menu {
     position: static;
     float: none;
     width: auto;
     margin-top: 0;
     background-color: transparent;
     border: 0;
     -webkit-box-shadow: none;
     box-shadow: none;
  }
}

Das hat mir den Trick gemacht:

@media only screen and (min-width:769px) and (max-width:1000px){
.navbar-collapse.collapse {
    display: none !important;
}
.navbar-collapse.collapse.in {
    display: block !important;
}
.navbar-header .collapse, .navbar-toggle {
    display:block !important;
}

In Bootstrap 4, wenn Sie bei Navbar-Expand-*überfahren möchten, erweitert und bricht und zeigt und zeigt den Hamburger (Navi-Toggler) und definieren Sie diesen Stil/Definition in Bootstrap.cs und definieren Sie sie in Ihrem neu besitzen CustomStyle.css (oder direkt in Bootstrap.css, wenn Sie so geneigt sind).

Z.B. Ich wollte, dass der Navbar-Expand-Lg zusammenbricht und den Navigations-Toggler bei 950px zeigt. In Bootstrap.css finde ich:

@media (max-width: 991.98px) {
  .navbar-expand-lg > .container,
  .navbar-expand-lg > .container-fluid {
    padding-right: 0;
    padding-left: 0;
  }
}

Und darunter ... 

@media (min-width:992px) { 
    ... lots of styling ...
}

Ich habe beide @media -Abfragen kopiert und sie in meinen Stil gesteckt. Ich mein Fall, ich wollte, dass es bei 950px zusammenbrach. Die @media-Abfragen müssen unterschiedliche Größen haben (ich vermute), daher habe ich die Max-Breite des Containers auf 949.98px festgelegt und den 950px für die andere @media-Abfrage verwendet. Daher wurde der folgende Code an meinen style.css angehängt. Dies war nicht leicht von verdrehten Lösungen zu entwirren, die ich auf Stackoverflow und anderswo gefunden habe. Hoffe das hilft.

@media (max-width: 949.98px) {
    .navbar-expand-lg > .container,
    .navbar-expand-lg > .container-fluid {
        padding-right: 0;
        padding-left: 0;
    }
}

@media (min-width: 950px) {
    .navbar-expand-lg {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }
    .navbar-expand-lg .navbar-nav {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
    }
    .navbar-expand-lg .navbar-nav .dropdown-menu {
        position: absolute;
    }
    .navbar-expand-lg .navbar-nav .dropdown-menu-right {
        right: 0;
        left: auto;
    }
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
    .navbar-expand-lg > .container,
    .navbar-expand-lg > .container-fluid {
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }
    .navbar-expand-lg .navbar-collapse {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-preferred-size: auto;
        flex-basis: auto;
    }
    .navbar-expand-lg .navbar-toggler {
        display: none;
    }
    .navbar-expand-lg .dropup .dropdown-menu {
        top: auto;
        bottom: 100%;
    }
}

Hier verwendet mein Arbeitscode in React mit Bootstrap

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin="anonymous">
<style>
  @media (min-width: 768px) and (max-width: 1000px) {
   .navbar-collapse.collapse {
       display: none !important;
   }
   .navbar-toggle{
        display: block !important;
   }
   .navbar-header{
        float: none;
   }
}
  </style>

Es wird jetzt auf Bootstrap 4.4 unterstützt

navbar-expand-sm
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top