Chciałem poradzić się Was jak poprawnie ustawić stałą szerokość menu w bootstrap. Jeżeli ustawię stałą szerokość dla mojego menu w ten sposób:

@media (min-width: 765px) {

nav.sidebar {
        width: 220px;
/*...*/

To wtedy chcę żeby pozostała zawartość strony była "czuła" - czyli robię to za pomocą col-md-6.. itd. tylko teraz jeżeli mam menu które jest szerokie na ileś tam pikseli to muszę szukać takiego rozmiaru żeby nie było za dużo, bo jak będzie to zawartość wyświetli mi się ale pod menu.
Takie podejście chyba nie jest do końca poprawne? i też nie wykorzystuje przez to całej przestrzeni strony. Chociaż mi to jakoś specjalnie nie przeszkadza.

Jeżeli dodam do bloku menu klasy col-md-3 itd to powstaje efekt który mnie irytuje i który nie chciałbym żeby w nim występował. To o co mi chodzi przedstawiam w zdjęciu. Z szerokości której oczekuje od menu robi się coraz mniejsza i potem przeskakuje na większą.

W skrócie chciałbym mieć stałą szerokość menu niezależnie od rozmiaru okna. (moje menu w wersji komórkowej wędruje do paska navbar).

Tak wygląda mój kod

<div class="container-fluid">
        <nav class="col-sm-3 col-md-3 col-lg-2 navbar navbar-default sidebar" role="navigation">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-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>
            </div>
            <div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li>@{Html.RenderAction("Menu", "Nav");}</li>
                </ul>
            </div>
        </nav>
        <div class="content col-sm-9 col-md-9 col-lg-9">
            @RenderBody()
        </div>
    </div>
  • menu.jpg (0.02 MB) - ściągnięć: 107