Bootstrap 3 - Deaktivieren Sie das Zusammenbrechen der Navigationsleiste

88

Dies ist meine einfache Navigationsleiste:

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

Ich möchte nur verhindern, dass dies zusammenbricht, weil ich es nicht brauche. Wie geht das?

Ich möchte vermeiden, 300.000 Zeilen CSS zu schreiben, um die Standardstile zu überschreiben.

Irgendein Vorschlag?

da ich bin
quelle

Antworten:

136

Nach eingehender Prüfung nicht 300.000 Zeilen, aber es gibt ungefähr 3-4 CSS-Eigenschaften, die Sie überschreiben müssen:

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

Und damit wird Ihr Menü nicht zusammenbrechen.

DEMO ( jsfiddle )

ERLÄUTERUNG

Die vier CSS-Eigenschaften erfüllen jeweils:

  1. Die Standardeigenschaft .collapsein Bootstrap verbirgt die rechte Seite des Menüs für Tablets (Querformat) und Telefone. Stattdessen wird eine Umschalttaste angezeigt, um sie auszublenden / anzuzeigen. Daher überschreibt diese Eigenschaft die Standardeinstellung und zeigt diese Elemente dauerhaft an.

  2. Damit das Menü auf der rechten Seite zusammen mit der linken Seite in derselben Zeile angezeigt wird, muss die linke Seite nach links schweben.

  3. Diese Eigenschaft ist standardmäßig im Bootstrap vorhanden, jedoch nicht auf dem Tablet (Hochformat) für die Telefonauflösung. Sie können diese überspringen, da dies wahrscheinlich keine Auswirkungen auf Ihre gesamte Navigationsleiste hat.

  4. Dadurch bleibt das Menü auf der rechten Seite rechts, während die inneren Elemente ( li) der Eigenschaft 2 folgen. Wir haben also die linke Seite links und die rechte Seite rechts, wodurch sie in einer Zeile zusammengefasst werden.

AyB
quelle
2
@gwho Der Antwort wurde gerade eine Erklärung hinzugefügt.
AyB
1
Wenn es dünn genug wird, können sich die schwebenden Elemente links und rechts gegenseitig umhüllen (ich spreche über das uls, nicht das lis). Was ist der beste Weg, um dies zu verhindern?
Ahnbizcad
2
Wenn Sie nur verhindern möchten, dass die UL / LI-Liste vertikal wird, ist nur das 2. CSS erforderlich.
JamesB
1
Die !importantAussagen sind hier nicht notwendig, bei mir funktioniert es ohne. Vermeiden Sie sie nach Möglichkeit (! Wichtig).
Tim-Erwin
2
@ICanHasKittenz Dropdowns ändern immer noch das Verhalten, wenn sie <768 px in der Navigationsleiste (kollabiertes Verhalten) angezeigt werden und wie erwartet in einem schwebenden weißen Feld (nicht reduziertes Verhalten) angezeigt werden. Der Dropdown-Titel wird beim Klicken erweitert, sodass andere Elemente verschoben werden müssen. Fügen Sie einfach ein Dropdown-Menü in ein Navigationsleistenelement ein, und Sie werden es selbst sehen.
Roubi
24

Der Nabvar wird auf kleinen Geräten zusammenbrechen. Der Punkt des Zusammenbruchs wird durch @grid-float-breakpointin Variablen definiert . Standardmäßig wird dies vorher 768px. Bei Bildschirmen unterhalb der Bildschirmbreite der 768Pixel sieht die Navigationsleiste folgendermaßen aus:

Geben Sie hier die Bildbeschreibung ein

Es ist möglich, die @grid-float-breakpointin variables.less zu ändern und Bootstrap neu zu kompilieren. Wenn Sie dies tun, müssen Sie auch @screen-xs-maxin navbar.less ändern . Sie müssen diesen Wert auf Ihren neuen Wert setzen @grid-float-breakpoint -1. Siehe auch: https://github.com/twbs/bootstrap/pull/10465 . Dies ist erforderlich, um Navigationsleistenformulare und Dropdowns am @ grid-float-breakpoint auch auf ihre mobile Version zu ändern.

Am einfachsten ist es, den Bootstrap anzupassen

Variable finden:

 @grid-float-breakpoint

auf eingestellt, @screen-smkönnen Sie es nach Ihren Bedürfnissen ändern. Ich hoffe es hilft!


Für SAAS-Benutzer

Fügen Sie Ihre benutzerdefinierten Variablen wie $grid-float-breakpoint: 0px;vor dem hinzu@import "bootstrap.scss";

Gagan Gami
quelle
4
Dies ist wirklich hilfreich. Leider verwende ich das Bootstrap-CDN, sodass ich die Bootstrap-Hauptdatei nicht anpassen kann. Gibt es einen Tipp, wie dies in einer separaten CSS-Datei gemacht werden kann?
Es ist der
2
+1 für die Variable @ grid-float-breakpoint auf der Bootstrap-Anpassungsseite, das hat den Trick für mich getan!
Wietse
4
Für SASS-Benutzer: $grid-float-breakpoint: 0px;@import "bootstrap.scss";
Fügen Sie
5

Hier ist ein Ansatz, bei dem das Standard-Kollapsverhalten unverändert bleibt, während ein neuer Navigationsabschnitt immer sichtbar bleibt. Es ist eine Erweiterung von navbar; navbar-header-menuist eine CSS-Klasse, die ich erstellt habe und die nicht Teil von Bootstrap ist.

Fügen Sie dies in das navbar-headerElement nach 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>

Fügen Sie dieses CSS hinzu:

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

Überprüfen Sie die Geige: http://jsfiddle.net/L2txunqo/

Vorsichtsmaßnahme: navbar-rightKann zum visuellen Sortieren von Elementen verwendet werden, es wird jedoch nicht garantiert, dass das Element an den äußersten rechten Teil des Bildschirms gezogen wird. Die Geige zeigt dieses Verhalten mit dem navbar-form.

Jeremy Cook
quelle
0

Wenn Sie nicht die Version mit weniger verwenden, müssen Sie die folgende Zeile ändern:

@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
quelle
0

Die folgende Lösung hat in Bootstrap 3.3.4 für mich funktioniert:

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

Fügen Sie dann die .no-Collapse- Klasse zu jeder der Listen und die .off- Klasse zum Hauptcontainer hinzu . Hier ist ein Beispiel aus Jade:

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

Eine andere Möglichkeit besteht darin, einfach collapse navbar-collapseaus dem Markup zu entfernen . Beispiel mit 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>

ausgraben
quelle