[HTML][CSS] Boostrap navbar Opcje

[dolar]

Witajcie. Czy jest tu ktos kto mi moze podpowiedziec dlaczego mi nie dziala na wszystkich ekranach ten navbar?
Tzn dziala na namniejszej (robi sie takie rozwijane menu ) i na monitorze na calej szerokosci , ale jak juz wejde tam np tabletem to zamiast mi sie navbar ladnie zmieniac dynamicznie i byc ciagle w jednej linii to linki w navbarze zaczynaja byc w dwoch liniach zamaist w jednej.
Co robie zle?

[HTML] pobierz, plaintext 
<nav class="navbar navbar-default " role="navigation">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Twoje zdrowie</a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li>
                    <a href="/#">Strona główna</a>
                </li>
                <li>
                    <a href="#">Recepty</a>
                </li>
                <li>
                    <a href="#">Nasi Lekarze</a>
                </li>
                @if(Auth::check())
                    <li>
                        <a href="#">Panel</a>
                    </li>
                    <li>
                        <a href="#">Wyloguj</a>
                    </li>
                @else
                    <li>
                        <a href="#">Login</a>
                    </li>
                    <li>
                        <a href="#">Rejestracja</a>
                    </li>
 
                @endif
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>
[HTML] pobierz, plaintext 

Wydaje mi sie ze nie dziala pomiedzy rozdzielczoscia 768 a 990. Wtedy menu sie zawija zamiast dostosowac.

Ten post edytował dolar 9.05.2017, 08:47:05

[gogomania]

wujek google jak zwykle przydatny.
bootstrap-tablet

[bostaf]

Cały layout w Bootstrapie ma domyślne wartości szerokości, dla których elementy układu zaczynają się zawijać/rozwijać. Jak zajrzysz do sekcji o dostosowywaniu Bootstrapa (http://getbootstrap.com/customize) to zobaczysz całą stertę zmiennych, które w domyślnym pakiecie mają jakieś konkretne wartości. Te, które określają kiedy zawijać/rozwijać zdefiniowane saą w sekcji Grid system. Tam jest taka zmienna opisana jako Point at which the navbar becomes uncollapsed - nazywa się "@grid-float-breakpoint" i ma domyślną wartość "@screen-sm-min". Jak prześledzisz wstecz, to zobaczysz, że ta wartość to konkretnie 768px, przypisana do zmiennej "@screen-sm". Czyli że domyślnie, poniżej 768px szerokości navbar się zwinie a powyżej będzie rozwinięty.

Ta domyślna szerokość to konkretna wartość, a więc nijak się ma do ilości elementów w menu, które wiadomo mogą mieć różną szerokość. W Twoim layoucie jest już ich tyle, że zawijają się zanim navbar się zwinie.

Żeby to dostosować do swoich potrzeb, możesz zmienić tą domyślną wartość na własną i kliknąć tam na dole formularza dostosowywania Bootstrapa "Compile and download". Zwiększ ją trochę i sprawdź efekt. Jeśli nie pasuje to znów zwiększ i sprawdź. Zamiast konkretnej wartości w "@grid-float-breakpoint" możesz też wpisać nazwę innej zmiennej, np "@screen-md".

To wydaje mi się najprostsza i najpewniejsza metoda. Można też modyfikować te wartości własnym CSSem, tak jak w tym artykule od gogomania, ale nie bezmyślnie kopiując, tylko analizując co i dlaczego tam się dzieje, bo przy innej wersji Bootstrapa może zacząć się krzaczyć.