Ändern Sie den Haltepunkt für das Reduzieren der Bootstrap-Navigationsleiste, ohne WENIGER zu verwenden

Derzeit wechselt die Navigationsleiste in den reduzierten Modus, wenn die Browserbreite unter 768px fällt. Ich möchte diese Breite auf 1000px ändern. Wenn der Browser unter 1000px liegt, wechselt die Navigationsleiste in den reduzierten Modus. Ich möchte dies tun, ohne WENIGER zu verwenden. Ich verwende einen Stift, der nicht WENIGER ist.

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

Alle Antworten in diesen Fragen erklären jedoch, wie dies durch Ändern der Variablen WENIGER zu tun ist. Ich habe mich nicht mit WENIGER befasst, ich benutze einen Stift, also möchte ich wissen, wie dies mit einem Stift oder einer anderen Methode gemacht werden kann.

Vielen Dank!

Sie müssen hierfür eine bestimmte Medienabfrage schreiben. Aus Ihrer Frage wird unter 768px die Navigationsleiste ausgeblendet. Wenden Sie sie also einfach über 768px und unter 1000px an:

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

Dadurch wird der Zusammenbruch der Navigationsleiste bis zum Standardvorkommen der Bootstrap-Einheit ausgeblendet. Wenn die Collapse-Klasse umgedreht wird, werden die inneren Assets innerhalb des Navbar-Collaps automatisch ausgeblendet, so wie Sie Ihr CSS wie gewünscht einstellen müssen.

2018 UPDATE

Bootstrap 4

Das Ändern des Navigationsleisten-Haltepunkts ist in Bootstrap 4 mithilfe der folgenden navbar-expand-*Klassen einfacher :

<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 = Verwenden Sie niemals das mobile Menü
• (no expand class) = immer mobiles Menü verwenden

Wenn Sie navbar-expand-*das mobile Menü ausschließen, wird es in allBreiten verwendet. Hier ist eine Demo aller 6 Navbar-Zustände: Bootstrap 4 Navbar-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 .navbar-nav .nav-link {
        padding-right: .5rem;
        padding-left: .5rem;
    }
    .navbar-expand-custom .navbar-collapse {
        display: flex!important;
    }
    .navbar-expand-custom .navbar-toggler {
        display: none;
    }
}

Bootstrap 4 Individuelle Navbar Breakpoint-
Bootstrap 4 Navbar Breakpoint- Beispiele

Für Bootstrap 3.3.x ist hier das funktionierende CSS zum Überschreiben des Navigationsleisten-Haltepunkts. Wechseln Sie 991pxin die Pixelgröße des Punkts, an dem die Navigationsleiste zusammenfallen soll ...

@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: Das Obige funktioniert für alles über 768px . Wenn Sie es auf weniger als 768px ändern müssen, finden Sie hier das Beispiel von weniger als 768px .

Ändern Sie in bootstrap3 diese Variable @ grid-float-breakpoint in die gewünschte. Der Standardwert ist 768px

Schließlich wurde unter http://getbootstrap.com/customize/ herausgefunden, wie Sie die Kollapsbreite ändern können, indem Sie mit '@ grid-float-breakpoint' herumspielen .

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

Der Code lautet 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 mit dem folgenden CSS-Code gemacht.

@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. WENIGER Quellcode ist eine Variable definiert, die in variables.lessaufgerufen definiert @grid-float-breakpointist und den folgenden hilfreichen Kommentar enthält:

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

Der Übereinstimmungswert @grid-float-breakpoint-maxwird auf minus 1px gesetzt:

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

Lösung:

Setzen Sie den @grid-float-breakpointWert stattdessen einfach auf 1000px und erstellen Sie ihn neu bootstrap.lessin bootstrap.css:

z.B

@grid-float-breakpoint: 1000px;

Die Sass-Methode zum Ändern von Bootstrap-Variablen ist tatsächlich auf der Bootstrap-Sass- Github-Seite dokumentiert.

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

$grid-float-breakpoint: 1000px;

@import 'bootstrap';

Fügen Sie zusätzlich zu @Skely answer auch die zu überschreibenden Klassen hinzu , damit Dropdown-Menüs in der Navigationsleiste funktionieren. Letzter Code unten:

    @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;
        }
    }

Demo-Code

In Bootstrap v4 kann die Navigation früher oder später mithilfe verschiedener CSS-Klassen reduziert werden

z.B:

• navbar-toggleable-sm
• navbar-toggleable-md
• navbar-toggleable-lg

Mit der Schaltfläche zur Navigation:

• versteckt-sm-up
• versteckt-md-up
• versteckt-lg-up

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;
   }
}

Das hat bei mir Bootstrap3 geklappt

@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 hat eine Weile gedauert, um diese beiden herauszufinden:

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

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

Ich bin ein großer Fan von SASS, daher verwende 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

Ansonsten ist Search & Replace Ihr bester Freund direkt in der CSS-Version ...

Hallo, ich denke, Sie können es mit CSS wie diesem tun. Sie können das Haltepunkt-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;
    }
}

Navbars können die Klassen .navbar-toggler, .navbar-Collapse und .navbar-expand {-sm | -md | -lg | -xl} verwenden, um Änderungen vorzunehmen, wenn ihr Inhalt hinter einer Schaltfläche zusammenfällt. In Kombination mit anderen Dienstprogrammen können Sie leicht auswählen, wann bestimmte Elemente ein- oder ausgeblendet werden sollen.

Fügen Sie für Navigationsleisten, die niemals zusammenbrechen, die Klasse .navbar-expand zur Navigationsleiste hinzu. Fügen Sie für Navigationsleisten, die immer zusammenbrechen, keine .navbar-expand-Klasse hinzu.

Zum Beispiel :

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

Das mobile Menü wird auf einem großen Bildschirm angezeigt.

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

Das hat mir den Trick getan:

@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 müssen Sie diesen Stil / diese Definition in bootstrap.css finden und in Ihrem neu definieren, wenn Sie Navbar-expand- * überschreiben, erweitern und reduzieren sowie den Hamburger (navbar-toggler) anzeigen und ausblenden möchten eigene customstyle.css (oder direkt in bootstrap.css, wenn Sie so geneigt sind).

Z.B. Ich wollte, dass der navbar-expand-lg zusammenbricht und den navbar-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 in meine style.css eingefügt und dann die Größe an meine Bedürfnisse angepasst. In meinem Fall wollte ich, dass es bei 950px zusammenbricht. Die @ media-Abfragen müssen unterschiedliche Größen haben (ich vermute), daher habe ich die maximale Breite des Containers auf 949,98 Pixel festgelegt und 950 Pixel für die andere @ media-Abfrage verwendet. Daher wurde der folgende Code an meine style.css angehängt. Dies war nicht leicht von verdrehten Lösungen zu trennen, die ich bei Stackoverflow und anderswo gefunden hatte. 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 mein Arbeitscode mit in React with 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 von Bootstrap 4.4 unterstützt

navbar-expand-sm