Bootstrap 3 - Deaktivieren Sie das Zusammenbrechen der Navigationsleiste

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?

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.

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:

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

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.

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

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

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>