Wie ändere ich den Schwellenwert für das Zusammenbrechen der Navigationsleiste mithilfe von Twitter-Bootstrap-Responsive?

Ich verwende Twitter Bootstrap 2.0.1 in einem Rails 3.1.2-Projekt, das mit bootstrap-sass implementiert wurde. Ich lade sowohl die bootstrap.cssals auch die bootstrap-responsive.cssDateien sowie das bootstrap-collapse.jsJavascript.

Ich habe ein flüssiges Layout mit einer Navigationsleiste ähnlich dem Beispiel . Dies folgt der navbar „responsive Variation“ Anweisungen hier . Es funktioniert einwandfrei: Wenn die Seite schmaler als etwa 940 Pixel ist, wird die Navigationsleiste ausgeblendet und eine "Schaltfläche" angezeigt, auf die ich klicken kann, um sie zu erweitern.

Meine Navigationsleiste sieht jedoch bis zu einer Breite von etwa 550 Pixel gut aus, dh sie muss nicht reduziert werden, es sei denn, der Bildschirm ist sehr schmal.

Wie kann ich Bootstrap anweisen, die Navigationsleiste nur zu reduzieren, wenn der Bildschirm weniger als 550 Pixel breit ist?

Beachten Sie, dass ich an dieser Stelle die anderen Reaktionsverhaltensweisen nicht ändern möchte, z. B. das Stapeln von Elementen, anstatt sie nebeneinander anzuzeigen.

Sie suchen nach Zeile 239 von bootstrap-responsive.css

@media (max-width: 979px) {...}

Wo der max-widthWert das reaktionsfähige Navi auslöst. Ändern Sie es auf 550px oder so und es sollte die Größe ändern.

Bootstrap> 2.1 && <3

• Verwenden Sie die weniger Version von Bootstrap
• Ändern Sie die Variable @navbarCollapseWidth in variables.less
• Neu kompilieren.

Update 2013: Der einfache Weg

• Besuchen Sie http://getbootstrap.com/customize/#less-variables
• Ändern Sie @navbarCollapseWidth im Formularfeld
• Klicken Sie auf "Kompilieren und Herunterladen".

(THX an Archonic per Kommentar)

Update 2014: Bootstrap 3.1.1 und 3.2 (sie haben es sogar zur Dokumentation hinzugefügt )

Wenn Sie Variablen anpassen oder überschreiben / bearbeiten .less, suchen Sie nach:

//** Point at which the navbar becomes uncollapsed.
@grid-float-breakpoint:     @screen-sm-min;
//** Point at which the navbar begins collapsing.
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);

Sie können eine neue @mediaAbfrage einrichten, um die Navigationsleistenelemente nach Belieben abzulegen. Sie müssen lediglich die erstere zurücksetzen, um Ihre neue Abfrage mit der gewünschten Ablagebreite aufzunehmen. Nehmen Sie zum Beispiel:

CSS

/** Modified Responsive CSS **/

@media (max-width: 979px) {
    .btn-navbar {
        display: none;
    }
    .navbar .nav-collapse {
        clear: none;
    }

    .nav-collapse {
        height: auto;
        overflow: auto;
    }

    .navbar .nav {
        float: left;
        margin: 0 10px 0 0;
    }

    .navbar .brand {
        margin-left: -20px;
        padding: 8px 20px 12px;
    }

    .navbar .dropdown-menu:before, .navbar .dropdown-menu:after {
        display: block;
    }

    .navbar .nav > li > a, .navbar .dropdown-menu a {
        border-radius: 0;
        color: #999999;
        font-weight: normal;
        padding: 10px 10px 11px;
    }

    .navbar .nav > li {
        float: left;
    }

    .navbar .dropdown-menu {
        background-clip: padding-box;
        background-color: #FFFFFF;
        border-color: rgba(0, 0, 0, 0.2);
        border-radius: 0 0 5px 5px;
        border-style: solid;
        border-width: 1px;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        display: none;
        float: left;
        left: 0;
        list-style: none outside none;
        margin: 0;
        min-width: 160px;
        padding: 4px 0;
        position: absolute;
        top: 100%;
        z-index: 1000;
    }

    .navbar-form, .navbar-search {
        border:none;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
        float: left;
        margin-bottom: 0;
        margin-top:6px;
        padding: 9px 15px;
    }

    .navbar .nav.pull-right {
        float: right;
        margin-left: auto;
    }
}

@media (max-width: 550px) {
    .btn-navbar {
        display: block;
    }
    .navbar .nav-collapse {
        clear: left;
    }

    .nav-collapse {
        height: 0;
        overflow: hidden;
    }

    .navbar .nav {
        float: none;
        margin: 0 0 9px;
    }

    .navbar .brand {
        margin: 0 0 0 -5px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .navbar .dropdown-menu:before, .navbar .dropdown-menu:after {
        display: none;
    }

    .navbar .nav > li > a, .navbar .dropdown-menu a {
        border-radius: 3px 3px 3px 3px;
        color: #999999;
        font-weight: bold;
        padding: 6px 15px;
    }

    .navbar .nav > li {
        float: none;
    }

    .navbar .dropdown-menu {
        background-color: transparent;
        border: medium none;
        border-radius: 0 0 0 0;
        box-shadow: none;
        display: block;
        float: none;
        left: auto;
        margin: 0 15px;
        max-width: none;
        padding: 0;
        position: static;
        top: auto;
    }

    .navbar-form, .navbar-search {
        border-bottom: 1px solid #222222;
        border-top: 1px solid #222222;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
        float: none;
        margin: 9px 0;
        padding: 9px 15px;
    }

    .navbar .nav.pull-right {
        float: none;
        margin-left: 0;
    }

}

Im folgenden Code können Sie sehen, wie ich die ursprüngliche @mediaAbfrage, die den Abwurf vor der 979pxMarkierung behandelt, und die neue Abfrage aufgenommen habe, um Ihren gewünschten Ablagepunkt von zu unterstützen 550px. Ich habe die ursprüngliche Abfrage direkt aus dem auf Bootstrap reagierenden CSS geändert, um alle Stile zurückzusetzen, die auf diese bestimmte Abfrage für die Navigationsleistenelemente angewendet wurden, und sie auf die neue Abfrage portiert, die stattdessen den gewünschten Ablagepunkt enthält. Auf diese Weise können wir alle Stile von der ursprünglichen Abfrage bis zur neuen Abfrage umwandeln, ohne im auf Bootstrap reagierenden Stylesheet herumzuspielen. Auf diese Weise gelten die Standardwerte weiterhin für die anderen Elemente in Ihrem Dokument.

Hier ist eine kurze Demo mit einer Medienabfrage, die bei Bedarf abgelegt werden550px kann: http://jsfiddle.net/wU8MW/

Hinweis: Ich habe die oben geänderten @mediaAbfragen weit unterhalb des CSS-Frames platziert, da das neue geänderte CSS zuerst als das reaktionsfähige CSS geladen werden soll.

bootstrap-sass unterstützt die Variable $ navbarCollapseWidth in der nächsten Version (2.2.1.0). Sie können es aktualisieren, um genau das zu tun, was Sie wollen, sobald diese Version live ist!

Ab August 2013 finden Sie eine Bootstrap 3-Seite "Anpassen und Herunterladen" unter http://getbootstrap.com/customize/.

Bei Bootstrap 3 ist die relevante Variable @ grid-float-breakpoint.

Die folgende Stapelüberlaufseite enthält zusätzliche Details: Bootstrap 3 Navbar Collapse

Ich vermute (und hoffe), dass dies bald offiziell umgesetzt wird. In der Zwischenzeit mache ich nur einen einfachen CSS-Hack, indem ich das sichtbare Telefon auf der Dropdown-Schaltfläche und das sichtbare Tablet auf einem zweiten Satz von Schaltflächen verwende, die ich in der Navigationsleiste platziert habe. Also bevor es so aussah:

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a href="<%= root_url %>" class="brand brandtag"></a>
      <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">
          <li>Navigation 1</li>
          <li>Navigation 2</li>
          <li>Navigation 3</li>
        </ul>
      </div>
    </div>
  </div>
</div>

Und jetzt sieht es so aus:

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a href="<%= root_url %>" class="brand brandtag"></a>
      <a class="btn btn-navbar visible-phone" 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="visible-tablet">
        <ul class="nav">
          <li>Navigation 1</li>
          <li>Navigation 2</li>
          <li>Navigation 3</li>
        </ul>
      </div>
      <div class="nav-collapse">
        <ul class="nav">
          <li>Navigation 1</li>
          <li>Navigation 2</li>
          <li>Navigation 3</li>
        </ul>
      </div>
    </div>
  </div>
</div>

Beachten Sie, dass die Reihenfolge der Elemente wichtig ist. Andernfalls können Probleme mit Elementen auftreten, die in die nächste Zeile aufgenommen werden

Ich habe eine separate SCSS-Datei erstellt, in der alle Partials aufgelistet sind, die Bootstrap benötigt. Auf diese Weise kann ich die Partials je nach den Anforderungen unserer Site ein- und ausschalten. Auf diese Weise kann ich die Haltepunktvariable leicht überschreiben. Folgendes habe ich bekommen:

// Core variables and mixins
$grid-float-breakpoint: 991px;
@import "bootstrap/variables";
@import "bootstrap/mixins";

// Reset
@import "bootstrap/normalize";
//@import "bootstrap/print";

// Core CSS
@import "bootstrap/scaffolding";
@import "bootstrap/type";
//@import "bootstrap/code";
@import "bootstrap/grid";
@import "bootstrap/tables";
@import "bootstrap/forms";
@import "bootstrap/buttons";

// Components
@import "bootstrap/component-animations";
@import "bootstrap/glyphicons";
@import "bootstrap/dropdowns";
//@import "bootstrap/button-groups";
//@import "bootstrap/input-groups";
@import "bootstrap/navs";
@import "bootstrap/navbar";
@import "bootstrap/breadcrumbs";
@import "bootstrap/pagination";
@import "bootstrap/pager";
@import "bootstrap/labels";
@import "bootstrap/badges";
//@import "bootstrap/jumbotron";
//@import "bootstrap/thumbnails";
@import "bootstrap/alerts";
//@import "bootstrap/progress-bars";
//@import "bootstrap/media";
//@import "bootstrap/list-group";
@import "bootstrap/panels";
//@import "bootstrap/wells";
@import "bootstrap/close";

// Components w/ JavaScript
@import "bootstrap/modals";
@import "bootstrap/tooltip";
//@import "bootstrap/popovers";
//@import "bootstrap/carousel";

// Utility classes
@import "bootstrap/utilities";
@import "bootstrap/responsive-utilities";

Hier ist mein Code (Alle anderen Lösungen zeigten eine funky Bildlaufleiste, als die Navigationsleiste herunterfiel und ich den Code so bearbeitete, dass dies nicht der Fall war). Ich konnte keine andere Antwort posten, also werde ich es hier tun, damit andere es finden. Ich benutze Schienen, um dies mit Bootstrap 3.0 zu tun.

Assets / Stylesheets / Framework und Overrides fügen Folgendes ein: (Passen Sie die maximale Breite an einen beliebigen Wert an, um Ihr Ziel zu erreichen.)

@media (max-width: 2500px) {
.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;
}
.navbar-nav>li {
    float: none;
}
.navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
}

Bootstrap 3.x.

Mit WENIGER können Sie den Wert von ändern @screen-small, um Ihre Mindestgröße zu bestimmen

Beispiel: @screen-small: 600px;

Ich benutze dies, um nur in den "winzigen Gerät" -Modus zu wechseln, wenn die Breite weniger als 600px beträgt

Bootstrap 3.x.

Mit SASS können Sie den Wert von $ screen-sm ändern, um Ihre Mindestgröße festzulegen

Beispiel: $ screen-sm: 600px;

Sie müssen diesen Wert vor dem @import "bootstrap" in Ihre application.scss-Datei einfügen.

$screen-sm:600px;
@import "bootstrap";

Weniger Variablen beginnen mit "@" und wurden nur in "$" geändert, um sie vor dem Import zu überschreiben.

Hier ist die Liste der Variablen.

Bootstrap 4.x.

Das Ändern des Kollapsschwellenwerts in Bootstrap 4.x ist ein Kinderspiel. Es gibt 6 Fälle:

1. Immer erweitern, niemals reduzieren (dh der Haltepunkt ist 0px): <nav class="navbar navbar-expand">...</nav>
2. Haltepunkt ist sm (576px):<nav class="navbar navbar-expand-sm">...</nav>
3. Haltepunkt ist md (768px):<nav class="navbar navbar-expand-md">...</nav>
4. Haltepunkt ist lg (992px):<nav class="navbar navbar-expand-lg">...</nav>
5. Haltepunkt ist xl (1200px):<nav class="navbar navbar-expand-xl">.../nav>
6. Immer kollabieren, niemals erweitern (dh der Haltepunkt ist ∞px). : <nav class="navbar">...</nav>(Entfernen Sie einfach die navbar-expand-*Klasse. Mobile-first wie in Bootstrap 4.x)

Dank für diesen Artikel von Carol Skelly fand ich https://medium.com/wdstack/examples-bootstrap-4-navbar-b3c9dc0edc1a

Dies ist ein großartiges Beispiel dafür, wo Sie die WENIGER-Version der Bootstrap-CSS-Dateien verwenden könnten. Wie das geht, erfahren Sie weiter unten.

Noch besser wäre es, dies als Pull-Anfrage an Github zu senden, damit jeder davon profitieren kann und Ihr "benutzerdefinierter Code" hoffentlich Teil von Bootstrap sein wird.

• Fügen Sie eine Variable hinzu variables.less die angibt, wann die Navigationsleiste ausgeblendet werden soll. Etwas wie:@navCollapseWidth: 979px
• Dann ändern responsive-navbar.less...
  • Oben nach oben wechseln @media (max-width: 979px)zu@media (max-width: @navCollapseWidth)
  • Unten wechseln Sie @media (min-width: 980px)zu@media (max-width: @navCollapseWidth - 1)

Natürlich ... müssten Sie WENIGER mit einer der vorgeschlagenen Methoden kompilieren .

Wenn Sie Tyler's Hack noch weiter vorantreiben, indem Sie einem Element in der zusammenklappbaren Hauptnavigation einen Block mit sichtbarer Telefonklasse und eine Klasse mit versteckten Telefonen hinzufügen , können Sie ein oder zwei der reduzierten Elemente herausziehen, um sie sogar in der Navigationsleiste des Telefons anzuzeigen.

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a href="<%= root_url %>" class="brand brandtag"></a>
      <a class="btn btn-navbar visible-phone" 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="visible-tablet">
        <ul class="nav">
          <li>Navigation 1</li>
          <li>Navigation 2</li>
          <li>Navigation 3</li>
        </ul>
      </div>
      <div class="visible-phone">
        <ul class="nav">
          <li>Navigation 1</li>
        </ul>
      </div>
      <div class="nav-collapse">
        <ul class="nav">
          <li class="hidden-phone">Navigation 1</li>
          <li>Navigation 2</li>
          <li>Navigation 3</li>
        </ul>
      </div>
    </div>
  </div>
</div>

Schreiben Sie diesen Code einfach in Ihre benutzerdefinierte style.css-Datei und es wird funktionieren

@media (min-width: 768px) and (max-width: 991px) {
        .navbar-collapse.collapse {
            display: none !important;
        }
        .navbar-collapse.collapse.in {
            display: block !important;
        }
        .navbar-header .collapse, .navbar-toggle {
            display:block !important;
        }
        .navbar-header {
            float:none;
        }
        .navbar-nav {
            float: none !important;
            margin: 0px;
        }
        .navbar-nav {
            margin: 7.5px -15px;
        }
        .nav > li {
            position: relative;
            display: block;
        }
        .navbar-nav > li {
            float: none !important;
        }
        .nav > li > a {
            position: relative;
            display: block;
            padding: 10px 15px;
        }
        .navbar-collapse {
            padding-right: 15px;
            padding-left: 15px;
            overflow-x: visible;
            border-top: 1px solid transparent;
            box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.1) inset;
        }
        .nav {
            padding-left: 0px;
            margin-bottom: 0px;
            list-style: outside none none;
        }
    }