Zmień punkt przerwania zwijania paska startowego bez używania MNIEJ

Obecnie, gdy szerokość przeglądarki spada poniżej 768 pikseli, pasek nawigacyjny przechodzi w tryb zwinięty. Chcę zmienić tę szerokość na 1000px, więc gdy przeglądarka jest poniżej 1000px, pasek nawigacyjny przechodzi w tryb zwinięty. Chcę to zrobić bez użycia MNIEJ, używam rysika nie MNIEJ.

Mój problem jest taki sam, jak w tym pytaniu: Bootstrap 3 Zwiń pasek nawigacyjny

Ale wszystkie odpowiedzi w tych pytaniach wyjaśniają, jak to zrobić, zmieniając zmienną LESS. Nie miałem do czynienia z MNIEJ, używam rysika, więc chcę wiedzieć, jak można to zrobić za pomocą rysika lub innej metody.

Dzięki!

Musisz napisać w tym celu określone zapytanie medialne , z twojego pytania, poniżej 768px, pasek nawigacyjny zwinie się, więc zastosuj go powyżej 768px i poniżej 1000px, tak po prostu:

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

To ukryje zwinięcie paska nawigacyjnego, aż do domyślnego wystąpienia jednostki ładującej. Gdy klasa zwinięcia odwróci, wewnętrzne zasoby wewnątrz zwinięcia paska nawigacyjnego zostaną automatycznie ukryte, podobnie jak musisz ustawić css zgodnie z oczekiwaniami.

AKTUALIZACJA 2018

Bootstrap 4

Zmiana punktu przerwania paska nawigacyjnego jest łatwiejsza w Bootstrap 4 za pomocą navbar-expand-*klas:

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

• navbar-expand-sm = menu mobilne na ekranach xs <576px
• navbar-expand-md = menu mobilne na ekranach sm <768px
• navbar-expand-lg = menu mobilne na ekranach md <992px
• navbar-expand-xl = menu mobilne na ekranach LG <1200px
• navbar-expand = nigdy nie używaj menu mobilnego
• (no expand class) = zawsze używaj menu mobilnego

Jeśli wykluczysz, navbar-expand-*menu mobilne będzie używane przy allszerokościach. Oto demo wszystkich 6 stanów paska nawigacyjnego : Bootstrap 4 Przykład paska nawigacyjnego

Możesz także użyć niestandardowego punktu przerwania (??? px), dodając trochę CSS. Na przykład tutaj jest 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 Niestandardowy punkt przerwania paska nawigacyjnego
Bootstrap 4 Przykłady punktu przerwania paska nawigacyjnego

W przypadku Bootstrap 3.3.x oto działający CSS, który zastępuje punkt przerwania paska nawigacyjnego. Zmień 991pxwymiar piksela w punkcie, w którym pasek nawigacyjny ma się zwinąć ...

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

Przykład roboczy dla 991px: http://www.bootply.com/j7XJuaE5v6
Przykład roboczy dla 1200px: https://www.codeply.com/go/VsYaOLzfb4 (z formularzem wyszukiwania)

Uwaga: powyższe działa dla wszystkiego powyżej 768px . Jeśli trzeba zmienić na mniej niż 768px na przykład mniej niż 768px jest tutaj .

w bootstrap3 zmień tę zmienną @ grid-float-breakpoint na potrzebną. Wartość domyślna to 768px

W końcu opracowano sposób zmiany szerokości zwinięcia, bawiąc się „@ grid-float-breakpoint” na stronie http://getbootstrap.com/customize/ .

Przejdź do wiersza 2923 w pliku bootstrap.css (również w wersji minimalnej) i zmień @media screen and (min-width: 768px) {na@media screen and (min-width: 1000px) {

Tak więc kod skończy się na:

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

Właśnie to zrobiłem, używając następującego kodu CSS.

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

}

W kodzie źródłowym Bootstrap 3 .LESS zdefiniowana jest zmienna variables.lesswywołana, @grid-float-breakpointktóra ma następujący pomocny komentarz:

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

Dopasowana @grid-float-breakpoint-maxwartość jest ustawiona na tę minus 1px:

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

Rozwiązanie:

Więc @grid-float-breakpointzamiast tego ustaw wartość na 1000px i przebuduj bootstrap.lessw bootstrap.css:

na przykład

@grid-float-breakpoint: 1000px;

Sposób Sass zmieniania zmiennych bootstrap jest faktycznie udokumentowany na stronie github bootstrap-sass .

Przedefiniuj zmienne przed @import bootstrap:

$grid-float-breakpoint: 1000px;

@import 'bootstrap';

Oprócz odpowiedzi @Skely, aby menu rozwijane wewnątrz paska nawigacyjnego działały, dodaj także ich klasy, które mają zostać zastąpione. Końcowy kod poniżej:

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

kod demonstracyjny

W bootstrap v4 nawigacja może zostać zwinięta wcześniej lub później za pomocą różnych klas css

na przykład:

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

Za pomocą przycisku do nawigacji:

• ukryty sm-up
• hidden-md-up
• ukryte-lg-up

W przypadku Bootstrap 3.3 jest to jedyny potrzebny kod:

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

To działało dla mnie 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;
      }
}

Zajęło trochę czasu, aby dowiedzieć się o tych dwóch:

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

Najlepszym rozwiązaniem byłoby skorzystanie z portu używanego procesora CSS.

Jestem wielkim fanem SASS, więc obecnie używam https://github.com/thomas-mcdonald/bootstrap-sass

Wygląda na to, że jest tu widelec do rysika: https://github.com/Acquisio/bootstrap-stylus

W przeciwnym razie Search & Replace jest twoim najlepszym przyjacielem w wersji css ...

Cześć, myślę, że możesz to zrobić za pomocą CSS w ten sposób, możesz zmienić menu ładowania punktu początkowego

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

Paski nawigacyjne mogą korzystać z klas .navbar-toggler, .navbar-collapse i .navbar-expand {-sm | -md | -lg | -xl}, aby zmienić, gdy ich zawartość zawinie się za przyciskiem. W połączeniu z innymi narzędziami możesz łatwo wybrać, kiedy chcesz pokazać lub ukryć określone elementy.

W przypadku pasków nawigacyjnych, które nigdy się nie zwalniają, dodaj klasę .navbar-expand na pasku nawigacyjnym. W przypadku pasków nawigacyjnych, które zawsze się zwalniają, nie dodawaj żadnych klas .navbar-expand.

Na przykład :

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

Menu mobilne jest wyświetlane na dużym ekranie.

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

Oto, co zrobiło dla mnie lewę:

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

W bootstrap 4, jeśli chcesz przejechać, gdy navbar-expand- *, rozwija się i zwija oraz pokazuje i ukrywa hamburgera (navbar-toggler), musisz znaleźć ten styl / definicję w bootstrap.css i przedefiniować go w swoim własny customstyle.css (lub bezpośrednio w bootstrap.css, jeśli masz na to ochotę).

Na przykład. Chciałem, aby navbar-expand-lg zwinął się i pokazuje przełącznik navbar w 950px. W bootstrap.css znajduję:

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

A poniżej tego ...

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

Skopiowałem oba zapytania @media i umieściłem je w moim style.css, a następnie zmodyfikowałem rozmiar, aby dostosować go do moich potrzeb. W moim przypadku chciałem, aby zwinął się przy rozdzielczości 950 pikseli. Kwerendy @media muszą mieć różne rozmiary (tak mi się wydaje), więc ustawiłem maksymalną szerokość kontenera na 949.98px i użyłem 950px dla innego zapytania @media, więc poniższy kod został dołączony do mojego style.css. Niełatwo było oddzielić od skręconych rozwiązań, które znalazłem na Stackoverflow i gdzie indziej. Mam nadzieję że to pomoże.

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

Tutaj mój działający kod używa w 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>

Jest teraz obsługiwany w Bootstrap 4.4

navbar-expand-sm