Jak zmienić próg zwinięcia paska nawigacyjnego za pomocą Twittera z funkcją bootstrap?

Używam Twitter Bootstrap 2.0.1 w projekcie Rails 3.1.2, zaimplementowanym z bootstrap-sass. Ja ładuje zarówno bootstrap.cssi te bootstrap-responsive.csspliki, jak również bootstrap-collapse.jsJavascript.

Mam układ płynny z paskiem nawigacyjnym podobnym do przykładu . Wynika to z navbar instrukcje „reaguje zmiana” tutaj . Działa dobrze: jeśli strona jest węższa niż około 940 pikseli, pasek nawigacyjny zwija się i wyświetla „przycisk”, który mogę kliknąć, aby rozwinąć.

Jednak mój pasek nawigacyjny wygląda dobrze przy szerokości około 550 pikseli, tj. Nie trzeba go zwinąć, chyba że ekran jest bardzo wąski.

Jak powiedzieć Bootstrapowi, aby zwinął pasek nawigacyjny tylko wtedy, gdy ekran ma szerokość mniejszą niż 550 pikseli?

Zauważ, że w tym momencie nie chcę modyfikować innych zachowań responsywnych, np. Układania elementów w stos zamiast wyświetlania ich obok siebie.

Szukasz linii 239 of bootstrap-responsive.css

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

Gdzie max-widthwartość wyzwala responsywną nawigację. Zmień go na około 550 pikseli, a rozmiar powinien się dobrze zmienić.

Bootstrap> 2.1 i <3

• Użyj mniej wersji bootstrap
• Zmień zmienną @navbarCollapseWidth w variable.less
• Przekompiluj.

Aktualizacja 2013: łatwy sposób

• Odwiedź http://getbootstrap.com/customize/#less-variables
• Zmień @navbarCollapseWidth w polu formularza
• Kliknij „Kompiluj i pobierz”.

(THX dla Archonic przez komentarz)

Aktualizacja 2014: Bootstrap 3.1.1 i 3.2 ( dodali go nawet do dokumentacji )

Jeśli dostosowujesz lub nadpisujesz / edytujesz .lesszmienne, szukasz:

//** 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);

Możesz utworzyć nowe @mediazapytanie, aby upuścić elementy paska nawigacyjnego według własnego uznania, wszystko, co musisz zrobić, to zresetować poprzednie, aby uwzględnić nowe zapytanie z żądaną szerokością upuszczania. Weź to na przykład:

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

}

W poniższym kodzie możesz zobaczyć, jak zawarłem oryginalne @mediazapytanie, które obsługuje upuszczanie przed 979pxznacznikiem i nowe zapytanie, aby wspierać żądany punkt upuszczania550px . Zmodyfikowałem oryginalne zapytanie bezpośrednio z css reagującego na ładowanie początkowe, aby zresetować wszystkie style zastosowane do tego konkretnego zapytania dla elementów navbar i przeniosłem je do nowego zapytania, które zawiera punkt zrzutu, którego potrzebujesz. W ten sposób możemy zamienić wszystkie style z pierwotnego zapytania do nowego zapytania bez grzebania w arkuszu stylów responsywnym bootstrap, w ten sposób domyślne wartości będą nadal miały zastosowanie do innych elementów w twoim dokumencie.

Oto krótkie demo z zapytaniem o media ustawionym 550pxzgodnie z potrzebami: http://jsfiddle.net/wU8MW/

Uwaga: Powyższe zmodyfikowane @mediazapytania umieściłem poniżej ramki css, ponieważ nowy zmodyfikowany css ma być ładowany jako pierwszy niż responsywny css.

bootstrap-sass będzie obsługiwał zmienną $ navbarCollapseWidth w następnej wersji (2.2.1.0). Będziesz mógł go zaktualizować, aby robił dokładnie to, co chcesz, gdy ta wersja zostanie uruchomiona!

Od sierpnia 2013 r. Strona Bootstrap 3 „Dostosuj i pobierz” jest dostępna pod adresem http://getbootstrap.com/customize/

W przypadku Bootstrap 3 odpowiednią zmienną jest @ grid-float-breakpoint.

Poniższa strona Stack Overflow zawiera dodatkowe szczegóły: Bootstrap 3 Navbar Collapse

Podejrzewam (i mam nadzieję), że wkrótce zostanie to oficjalnie wdrożone. W międzyczasie robię prosty hack css, używając widocznego telefonu na przycisku rozwijanym i widocznego tabletu na drugim zestawie przycisków, które umieściłem na pasku nawigacyjnym. Więc zanim wyglądało to tak:

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

A teraz wygląda to tak:

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

Zauważ, że kolejność elementów jest ważna, w przeciwnym razie możesz mieć problemy z przechodzeniem elementów do następnej linii

Utworzyłem osobny plik SCSS, który zawierał listę wszystkich części składowych, których potrzebuje bootstrap, w ten sposób mogę włączać i wyłączać części składowe w zależności od potrzeb naszej witryny. W ten sposób mogę łatwo zastąpić zmienną punktu przerwania. Oto co mam:

// 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";

Oto mój kod (wszystkie inne rozwiązania pokazały funky pasek przewijania, gdy pasek nawigacyjny opadł, więc zmodyfikowałem kod, więc tak się nie stało). Nie mogę opublikować innej odpowiedzi, więc zrobię to tutaj, aby inni mogli znaleźć. Aby to zrobić, używam railsów z Bootstrap 3.0.

zasoby / arkusze stylów / ramy i zastąpienia wklej to: (Dostosuj maksymalną szerokość do dowolnej wartości, aby osiągnąć swój cel).

@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

używając MNIEJ , możesz zmienić wartość, @screen-smallaby ustawić minimalny rozmiar

przykład: @screen-small: 600px;

używam tego tylko do przełączania się w tryb „małego urządzenia”, gdy szerokość jest mniejsza niż 600 pikseli

Bootstrap 3.x

używając SASS, możesz zmienić wartość $ screen-sm, aby ustawić minimalny rozmiar

przykład: $ screen-sm: 600px;

Musisz umieścić tę wartość w pliku application.scss przed @import "bootstrap";

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

Mniej zmiennych zaczyna się od „@”, po prostu zmieniło je na „$”, aby nadpisać je przed importem.

Oto lista zmiennych.

Bootstrap 4.x

Zmiana progu zwijania w Bootstrap 4.x jest bardzo prosta. Istnieje 6 przypadków:

1. Zawsze rozwijaj, nigdy nie zwijaj (np. Punkt przerwania to 0 pikseli): <nav class="navbar navbar-expand">...</nav>
2. Punkt przerwania to sm (576px):<nav class="navbar navbar-expand-sm">...</nav>
3. Punkt przerwania to md (768 pikseli):<nav class="navbar navbar-expand-md">...</nav>
4. Punkt przerwania to lg (992px):<nav class="navbar navbar-expand-lg">...</nav>
5. Punkt przerwania to xl (1200 pikseli):<nav class="navbar navbar-expand-xl">.../nav>
6. Zawsze zwijaj, nigdy nie rozwijaj (np. Punkt przerwania to ∞px). : <nav class="navbar">...</nav>(Po prostu usuń navbar-expand-*klasę. Mobile-first, jak w Bootstrap 4.x)

Podziękowania dla tego artykułu autorstwa Carol Skelly, które znalazłem https://medium.com/wdstack/examples-bootstrap-4-navbar-b3c9dc0edc1a

To świetny przykład tego, gdzie można używać MNIEJSZEJ wersji plików Bootstrap CSS. Jak to zrobić, znajdziesz poniżej.

Jeszcze lepiej byłoby przesłać to jako żądanie ściągnięcia na Github, aby każdy mógł skorzystać, a Twój „niestandardowy kod” byłby, miejmy nadzieję, częścią postępu w Bootstrap.

• Dodaj zmienną, variables.lessktóra określa, kiedy zwinąć pasek nawigacyjny. Coś jak:@navCollapseWidth: 979px
• Następnie zmodyfikuj responsive-navbar.less...
  • Do góry zmień @media (max-width: 979px)na@media (max-width: @navCollapseWidth)
  • Na dole zmień @media (min-width: 980px)na@media (max-width: @navCollapseWidth - 1)

Oczywiście ... musiałbyś skompilować MNIEJ, używając jednej z sugerowanych metod .

Posuwając się jeszcze dalej, dodając blok sklasyfikowany jako widoczny telefon i klasę ukrytego telefonu do elementu w głównej zwijanej nawigacji, możesz „wyciągnąć” jeden lub dwa zwinięte elementy, aby wyświetlić je nawet na pasku nawigacyjnym telefonu.

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

Po prostu zapisz ten kod w swoim niestandardowym pliku style.css i zadziała

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