Bootstrap 3 - wyłącz zwijanie paska nawigacyjnego

88

To jest mój prosty pasek nawigacyjny:

<div class="navbar navbar-fixed-top myfont" role="navigation">
    <div class="">
        <ul class="nav navbar-nav navbar-left">
            <li>
                <a class="navbar-brand" href="#">
                    <img src="assets/img/logo.png"/>
                </a>
            </li>
            <li>
                <button class="btn btn-navbar">
                    <i class="fa fa-edit"></i>
                    Create 
                </button>
            </li>
        </ul>
    </div>
    <ul class="nav navbar-nav navbar-right">
        <li data-match-route="/"><a href="#/page-one">Login</a></li>
        <li data-match-route="/"><a href="#/page-two/sub-a">Signup</a></li>
    </ul>
</div>

Chciałbym tylko zapobiec zawaleniu się tego, bo nie potrzebuję tego, jak to zrobić?

Chciałbym uniknąć pisania 300 tys. Linii CSS w celu zastąpienia domyślnych stylów.

Jakieś sugestie?

css twitter-bootstrap-3 navbar collapse preventdefault to ja
źródło

Odpowiedzi:

138

Po dokładnym zbadaniu nie ma 300 tysięcy linii, ale jest około 3-4 właściwości CSS, które należy nadpisać:

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

.navbar-nav>li, .navbar-nav {
  float: left !important;
}

.navbar-nav.navbar-right:last-child {
  margin-right: -15px !important;
}

.navbar-right {
  float: right!important;
}

Dzięki temu Twoje menu się nie zawali.

DEMO ( jsfiddle )

WYJAŚNIENIE

Cztery właściwości CSS wykonują odpowiednie czynności:

  1. Domyślna .collapsewłaściwość w bootstrap ukrywa prawą stronę menu dla tabletów (poziomo) i telefonów, a zamiast tego jest wyświetlany przycisk przełącznika, aby je ukryć / pokazać. W związku z tym ta właściwość przesłania wartość domyślną i trwale wyświetla te elementy.

  2. Aby menu po prawej stronie pojawiło się w tym samym wierszu wraz z lewą stroną, potrzebujemy, aby lewa strona unosiła się w lewo.

  3. Ta właściwość jest obecna domyślnie w bootstrapie, ale nie na tablecie (portret) do rozdzielczości telefonu. Możesz pominąć ten, prawdopodobnie nie wpłynie to na ogólny pasek nawigacyjny.

  4. To utrzymuje menu po prawej stronie po prawej stronie, podczas gdy elementy wewnętrzne ( li) będą podążać za właściwością 2. Tak więc mamy lewą stronę pływającą po lewej stronie i po prawej stronie zmiennoprzecinkową, która przenosi je do jednej linii.

AyB
źródło
2
@gwho Właśnie dodałem wyjaśnienie do odpowiedzi.
AyB
1
Jeśli zrobi się wystarczająco chudy, pływające lewe i pływające prawe elementy mogą się owijać (mówię o nich, ula nie o tych li). Jaki jest najlepszy sposób, aby temu zapobiec?
ahnbizcad
2
Jeśli Twoim jedynym wymaganiem jest zapobieganie przekształceniu się listy UL / LI w pionie, wystarczy 2. CSS.
JamesB
1
Te !importantoświadczenia nie są tu konieczne, dla mnie to działa bez. Staraj się ich unikać, kiedy tylko jest to możliwe (! Ważne).
Tim-Erwin
2
@ICanHasKittenz Rozwijane listy nadal zmieniają zachowanie, gdy <768 pikseli, są wyświetlane na pasku nawigacyjnym (zwinięty wygląd) wewnątrz i pojawiają się w pływającym białym polu (niezwinięte zachowanie), jak można by się spodziewać. Tytuł listy rozwijanej rozszerza się po kliknięciu, zmuszając inne elementy do przesunięcia. Po prostu dodaj listę rozwijaną w elemencie paska nawigacyjnego, a zobaczysz to sam.
Roubi
24

Nabvar upadnie na małych urządzeniach. Punkt załamania jest określony przez @grid-float-breakpointzmienne. Domyślnie będzie to wcześniej 768px. W przypadku ekranów poniżej 768szerokości ekranu w pikselach pasek nawigacyjny będzie wyglądał następująco:

wprowadź opis obrazu tutaj

Możliwa jest zmiana @grid-float-breakpointin variable.less i ponowna kompilacja Bootstrap. Robiąc to, będziesz musiał również zmienić @screen-xs-maxnavbar.less. Będziesz musiał ustawić tę wartość na nową @grid-float-breakpoint -1. Zobacz też: https://github.com/twbs/bootstrap/pull/10465 . Jest to potrzebne, aby zmienić formularze i listy rozwijane paska nawigacyjnego w @ grid-float-breakpoint na ich wersję mobilną.

Najłatwiej jest dostosować bootstrap

znajdź zmienną:

 @grid-float-breakpoint

który jest ustawiony na @screen-sm, możesz go zmienić zgodnie ze swoimi potrzebami. Mam nadzieję, że to pomoże!

Dla użytkowników SAAS

dodaj zmienne niestandardowe, tak jak $grid-float-breakpoint: 0px;przed@import "bootstrap.scss";

Gagan Gami
źródło
4
to jest naprawdę pomocne, niestety używam CDN bootstrap, więc nie mogę dostosować głównego pliku bootstrap, jakaś wskazówka, jak to zrobić w oddzielnym pliku css?
itsme
2
+1 dla zmiennej @ grid-float-breakpoint-na stronie dostosowywania bootstrapu, to załatwiło sprawę!
Wietse
4
Dla użytkowników SASS: wystarczy dodać zmienne niestandardowe, tak jak $grid-float-breakpoint: 0px;przed @import "bootstrap.scss";wierszem
Duvrai
5

Oto podejście, które pozostawia domyślne zachowanie zwijania bez zmian, jednocześnie pozwalając nowej sekcji nawigacji zawsze pozostać widoczną. To rozszerzenie navbar;navbar-header-menujest klasą CSS, którą stworzyłem i nie jest częścią właściwego Bootstrapa.

Umieść to w navbar-headerelemencie po navbar-brand:

<div class="navbar-header-menu">
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">I'm always visible</a></li>
    </ul>
    <form class="navbar-form" role="search">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
    </form>
</div>

Dodaj ten CSS:

.navbar-header-menu {
    float: left;
}

    .navbar-header-menu > .navbar-nav {
        float: left;
        margin: 0;
    }

        .navbar-header-menu > .navbar-nav > li {
            float: left;
        }

            .navbar-header-menu > .navbar-nav > li > a {
                padding-top: 15px;
                padding-bottom: 15px;
            }

        .navbar-header-menu > .navbar-nav .open .dropdown-menu {
            position: absolute;
            float: left;
            width: auto;
            margin-top: 0;
            background-color: #fff;
            border: 1px solid #ccc;
            border: 1px solid rgba(0,0,0,.15);
            -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
            box-shadow: 0 6px 12px rgba(0,0,0,.175);
        }

    .navbar-header-menu > .navbar-form {
        float: left;
        width: auto;
        padding-top: 0;
        padding-bottom: 0;
        margin-right: 0;
        margin-left: 0;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

        .navbar-header-menu > .navbar-form > .form-group {
            display: inline-block;
            margin-bottom: 0;
            vertical-align: middle;
        }

    .navbar-header-menu > .navbar-left {
        float: left;
    }

    .navbar-header-menu > .navbar-right {
        float: right !important;
    }

    .navbar-header-menu > *.navbar-right:last-child {
        margin-right: -15px !important;
    }

Sprawdź skrzypce: http://jsfiddle.net/L2txunqo/

Uwaga: navbar-rightmożna użyć do wizualnego sortowania elementów, ale nie gwarantuje, że przyciągnie element do najdalszej prawej części ekranu. Skrzypce demonstrują to zachowanie z navbar-form.

Jeremy Cook
źródło
0

Jeśli nie używasz mniejszej wersji, oto wiersz, który musisz zmienić:

@media (max-width: 767px) { /* Change this to 0 */
  .navbar-nav .open .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: transparent;
    border: 0;
    box-shadow: none;
  }
  .navbar-nav .open .dropdown-menu > li > a,
  .navbar-nav .open .dropdown-menu .dropdown-header {
    padding: 5px 15px 5px 25px;
  }
  .navbar-nav .open .dropdown-menu > li > a {
    line-height: 20px;
  }
  .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-nav .open .dropdown-menu > li > a:focus {
    background-image: none;
  }
}
Michael Ribbons
źródło
0

Następujące rozwiązanie działało dla mnie w Bootstrap 3.3.4:

CSS:

/*no collapse*/

.navbar-collapse.collapse.off {
    display: block!important;
}
.navbar-collapse.collapse.off ul {
    margin: 0;
    padding: 0;
}

.navbar-nav.no-collapse>li,
.navbar-nav.no-collapse {
    float: left !important;
}

.navbar-right.no-collapse {
    float: right!important;
}

następnie dodaj klasę .no-collapse do każdej z list, a klasę .off do głównego kontenera. Oto przykład napisany jadeitem:

nav.navbar.navbar-default.navbar-fixed-top
        .container-fluid
            .collapse.navbar-collapse.off
                ul.nav.navbar-nav.no-collapse
                    li
                        a(href='#' class='glyph')
                            i(class='glyphicon glyphicon-info-sign')
                ul.nav.navbar-nav.navbar-right.no-collapse
                    li.dropdown
                        a.dropdown-toggle(href='#', data-toggle='dropdown' role='button' aria-expanded='false')
                            | Tools
                            span.caret
                        ul.dropdown-menu(role='menu')
                            li
                                a(href='#') Tool #1
                    li
                        a(href='#')
                            | Logout
Cristi Draghici
źródło
0

Innym sposobem jest po prostu usunięcie collapse navbar-collapseze znaczników. Przykład z Bootstrap 3.3.7

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<nav class="navbar navbar-atp">
  <div class="container-fluid">
    <div class="">
      <ul class="nav navbar-nav nav-custom">
        <li>
          <a href="#" id="sidebar-btn"><span class="fa fa-bars">Toggle btn</span></a>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li>Nav item</li>
      </ul>
    </div>
  </div>
</nav>
Rozwiń fragment

wykopać
źródło