it-swarm.dev

Zmień punkt złamania bootstrap navbar collapse bez użycia LESS

Obecnie, gdy szerokość przeglądarki spada poniżej 768 pikseli, navbar zmienia się w tryb zwinięty. Chcę zmienić tę szerokość na 1000px, więc gdy przeglądarka ma mniej niż 1000px, navbar zmienia się w tryb zwinięty. Chcę to zrobić bez użycia LESS, używam rysika nie LESS. 

Mój problem jest taki sam jak w tym pytaniu: Upadek Bootstrap 3 Navbar

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

Dzięki! 

180
nearpoint

Musisz napisać konkretny media query do tego, z twojego pytania, poniżej 768px, navbar zwinie się, więc zastosuj go powyżej 768px i poniżej 1000px, tak jak poniżej:

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

Spowoduje to ukrycie zwinięcia paska nawigacyjnego do czasu wystąpienia domyślnej jednostki ładującej. Ponieważ klasa collapse odwraca wewnętrzne zasoby wewnątrz panelu navbar, zostanie automatycznie ukryta, tak jak rozsądnie, musisz ustawić swoje css zgodnie z pożądanym projektem.

49
SaurabhLP

2018 AKTUALIZACJA

Bootstrap 4

Zmiana punktu przerwania paska nawigacyjnego jest łatwiejsza w Bootstrap 4 przy użyciu klas navbar-expand-*:

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

  • navbar-expand-smmenu 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 mobilnego menu
  • (no expand class) = zawsze korzystaj z mobilnego menu

Jeśli wykluczysz navbar-expand-*, menu mobilne zostanie użyte w all szerokości. Oto demonstracja wszystkich 6 stanów paska nawigacyjnego: Przykład Bootstrap 4 Navbar

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 Przerwa w pasku nawigacji
Przykłady punktów przerwania dla Bootstrap 4 z pasmami pomocniczymi


Bootstrap 3

W przypadku Bootstrap 3.3.x, tutaj jest working CSS, aby zastąpić punkt przerwania navbar. Zmień 991px na wymiar w pikselach punktu, w którym ma zwinąć się pasek nawigacyjny ...

@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 ponad 768px. Jeśli musisz zmienić ją na mniejszą niż 768px, przykład poniżej 768px jest tutaj .


339
Zim

w bootstrap3 , zmień tę zmienną @ grid-float-breakpoint na tę, której potrzebujesz. Domyślna wartość to 768px

44
fengd

Wreszcie udało się opracować sposób zmiany szerokości zwijania za pomocą "@ grid-float-breakpoint" na http://getbootstrap.com/customize/ .

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

Tak więc kod zakończy się:

@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

W Bootstrap 3 .LESS kod źródłowy , istnieje zmienna zdefiniowana w variables.less o nazwie @grid-float-breakpoint, która zawiera następujący pomocny komentarz:

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

Dopasowana wartość @grid-float-breakpoint-max jest ustawiona na wartość minus 1 piksel:

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

Rozwiązanie:

Dlatego ustaw wartość @grid-float-breakpoint na 1000px i przebuduj bootstrap.less na bootstrap.css:

na przykład.

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

Po prostu zrobiłem to pomyślnie, 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;
    }

}
12
ruperto17

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

Po prostu zredefiniuj zmienne przed @import bootstrap:

$grid-float-breakpoint: 1000px;

@import 'bootstrap';
10
tropicalfish

Oprócz odpowiedzi @Skely, aby tworzyć menu {rozwijane menu wewnątrz navbara, dodaj także ich klasy, aby je przerobić. 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

7
jacvalle

W bootstrap v4 nawigacja może zostać zwinięta prędzej czy później przy użyciu różnych klas css

na przykład:

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

Za pomocą przycisku do nawigacji:

  • ukryty-sm-up
  • ukryty-md-up
  • ukryte-lg-up
4
Eddie Jaoude

W przypadku Bootstrap 3.3 jest to jedyny kod, którego potrzebujesz:

@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

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 wymyślić te dwa:

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

Najlepiej byłoby użyć 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 istnieje rysik do rysika: https://github.com/Acquisio/bootstrap-stylus

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

2
allaire

Cześć, myślę, że możesz to zrobić za pomocą CSS w ten sposób Możesz zmienić menu bootstrapu breakpoint 

    @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

W bootstrap 4, jeśli chcesz przejechać, gdy navbar-expand- *, rozwija się i zwija i pokazuje i ukrywa hamburgera (navbar-toggler), musisz znaleźć ten styl/definicję w bootstrap.css i zdefiniować go ponownie w swoim własne customstyle.css (lub bezpośrednio w bootstrap.css, jeśli jesteś tak pochyły). 

Na przykład. Chciałem, aby navbar-expand-lg zwijał się i wyświetlał navbar-togglerat 950px. W pliku 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 ... 

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

Skopiowałem oba zapytania @media i utkwiłem je w pliku style.css, a następnie zmodyfikowałem rozmiar, aby pasował do moich potrzeb. W moim przypadku chciałem, aby zwinął się na poziomie 950 pikseli. Kwerendy @media muszą mieć różne rozmiary (domyślam się), więc ustawiłem maksymalną szerokość kontenera na 949.98px i użyłem 950px dla drugiego zapytania @media, więc poniższy kod został dodany do mojego pliku style.css. Nie było łatwo oddzielić się od zakrę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%;
    }
}
0
Jack Mason

Oto, co mi się udało:

@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

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