it-swarm.com.de

Ändern Sie den Kollaps-Haltepunkt der Bootstrap-Navbar, ohne LESS zu verwenden

Wenn die Browserbreite derzeit unter 768 Pixel fällt, wechselt die Navigationsleiste in den minimierten Modus. Ich möchte diese Breite in 1000px ändern. Wenn der Browser unter 1000px ist, wechselt die Navigationsleiste in den reduzierten Modus. Ich möchte dies ohne Verwendung von LESS tun, ich verwende den Stift und nicht weniger. 

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 LESS-Variablen geschieht. Ich habe mich nicht mit LESS beschäftigt, ich verwende Stift, also möchte ich wissen, wie dies mit Stift oder einer anderen Methode möglich ist. 

Vielen Dank! 

180
nearpoint

Sie müssen eine bestimmte media-Abfrage schreiben. Dazu wird aus Ihrer Frage unterhalb von 768px die Navbar-Funktion eingeblendet. Wenden Sie sie also oberhalb von 768px und unter 1000px an.

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

Dadurch wird der Navbar-Zusammenbruch ausgeblendet, bis die Bootstrap-Einheit standardmäßig auftritt. Wenn die Klasse für den Kollaps umgedreht wird, werden die inneren Elemente im Navbar-Kollaps automatisch ausgeblendet. Wie Sie es tun müssen, müssen Sie Ihre CSS wie gewünscht einstellen.

49
SaurabhLP

2018 UPDATE

Bootstrap 4

Das Ändern des Navbar-Haltepunkts ist in Bootstrap 4 mit den 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 = niemals mobiles Menü verwenden
  • (no expand class) = immer mobiles Menü verwenden

Wenn Sie navbar-expand-* ausschließen, wird das mobile Menü mit all widths 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 ist hier 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 Benutzerdefiniert Navbar-Haltepunkt
Bootstrap 4 Beispiele für Navbar-Haltepunkte


Bootstrap 3

Für Bootstrap 3.3.x ist hier das working CSS, das den Haltepunkt der Navbar überschreibt. Ändern Sie 991px in die Pixelgröße des Punkts, an dem die Navigationsleiste minimiert werden 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;
  }
}

Funktionsbeispiel für 991px: http://www.bootply.com/j7XJuaE5v6
Funktionsbeispiel für 1200px: https://www.codeply.com/go/VsYaOLzfb4 (mit Suchformular)

Hinweis: Die obigen Ausführungen funktionieren für alles über 768px. Wenn Sie es in weniger als 768pxändern müssen, _, ist das Beispiel von weniger als 768px hier .


339
Zim

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

44
fengd

Schließlich wurde herausgefunden, wie man die Breite des Einklappens durch "@ grid-float-breakpoint" unter http://getbootstrap.com/customize/ ändert.

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

Der Code wird also am Ende sein:

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

In Bootstrap 3 .LESS source code gibt es eine in variables.less definierte Variable namens @grid-float-breakpoint, die den folgenden hilfreichen Kommentar enthält:

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

Der übereinstimmende @grid-float-breakpoint-max-Wert wird auf diesen minus 1px gesetzt:

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

Lösung:

Setzen Sie den Wert @grid-float-breakpoint stattdessen auf 1000px und erstellen Sie bootstrap.less neu in bootstrap.css:

z.B.

@grid-float-breakpoint: 1000px;
12
Gone Coding

Ich habe dies erfolgreich mit dem folgenden CSS-Code erfolgreich ausgeführt.

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

}
12
ruperto17

Die Sass-Methode zum Ändern von Bootstrap-Variablen ist auf der Seite bootstrap-sass github dokumentiert.

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

$grid-float-breakpoint: 1000px;

@import 'bootstrap';
10
tropicalfish

Um mit @Skely antworten Dropdown-Menüs in der Navbar-Funktion zu erstellen, fügen Sie auch ihre Klassen hinzu, um sie zu überschreiben. Schlusscode 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

7
jacvalle

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

z.B:

  • navbar-umschaltbar-sm
  • navbar-umschaltbar-md
  • navbar-umschaltbar-lg

Mit dem Button für die Navigation:

  • verstecktes sm-up
  • versteckte md-up
  • hidden-lg-up
4
Eddie Jaoude

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

Das hat bei mir Bootstrap3 funktioniert

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

Am besten verwenden Sie einen Port des 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 der beste Freund in der CSS-Version ...

2
allaire

Hallo, ich denke, du kannst es mit CSS wie folgt machen 

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

Wenn Sie in bootstrap 4 übergehen möchten, wenn navbar-expand- * expandiert, zusammenfällt und den Hamburger (navbar-toggler) zeigt und verbirgt, müssen Sie diesen Stil/diese Definition in bootstrap.css finden und in Ihrem neu definieren eigene customstyle.css (oder direkt in bootstrap.css, wenn Sie dazu neigen). 

Z.B. Ich wollte das navbar-expand-lg kollabiert und zeigt den navbar-togglerat 950px. 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-Datei geklebt und die Größe an meine Bedürfnisse angepasst. Ich wollte, dass es bei 950px zusammenbricht. Die @media-Abfragen müssen unterschiedliche Größen haben (schätze ich), daher habe ich den Container max-width auf 949.98px gesetzt und den 950px 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 auf 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%;
    }
}
0
Jack Mason

Dies hat mir den Trick gebracht:

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

Hier mein Arbeitscode 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>
0
webmastx