Bootstrap 3 – inklappen navigatiebalk uitschakelen

Dit is mijn eenvoudige navigatiebalk:

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

Ik wil gewoon voorkomen dat dit instort, omdat ik het niet nodig heb, hoe moet ik dat doen?

Ik wil voorkomen dat ik 300K regels CSS schrijf om de standaardstijlen te overschrijven.

Enige suggestie?

Antwoord 1, autoriteit 100%

Na nauwkeurig onderzoek zijn er geen 300.000 regels, maar zijn er ongeveer 3-4 CSS-eigenschappen die u moet overschrijven:

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

En hiermee klapt je menu niet in.

DEMO(jsfiddle)

UITLEG

De vier CSS-eigenschappen doen het respectievelijke:

1. De standaard eigenschap .collapsein bootstrap verbergt de rechterkant van het menu voor tablets (landschap) en telefoons en in plaats daarvan wordt een schakelknop weergegeven om deze te verbergen/weergeven. Dus deze eigenschap overschrijft de standaard en toont die elementen voortdurend.

2. Om het menu aan de rechterkant samen met de linkerkant op dezelfde regel te laten verschijnen, moeten we de linkerkant naar links laten zweven.

3. Deze eigenschap is standaard aanwezig in bootstrap, maar niet in de resolutie van tablet (portret) naar telefoon. Je kunt deze overslaan, het heeft waarschijnlijk geen invloed op je algehele navigatiebalk.

4. Hierdoor blijft het rechtermenu aan de rechterkant, terwijl de binnenste elementen (li) de eigenschap 2 zullen volgen. Dus we hebben links float leften rechterkant naar rechts drijvenwaardoor ze op één lijn komen te staan.

Antwoord 2, autoriteit 17%

De nabvar zal op kleine apparaten instorten. Het punt van samenvouwen wordt gedefinieerd door @grid-float-breakpointin variabelen. Standaard is dit vóór 768px. Voor schermen onder de schermbreedte van 768pixels ziet de navigatiebalk er als volgt uit:

Het is mogelijk om het @grid-float-breakpointin variables.less te wijzigen en Bootstrap opnieuw te compileren. Wanneer u dit doet, moet u ook @screen-xs-maxwijzigen in navbar.less. U moet deze waarde instellen op uw nieuwe @grid-float-breakpoint -1. Zie ook: https://github.com/twbs/bootstrap/pull/10465. Dit is nodig om navigatieformulieren en vervolgkeuzemenu’s op het @grid-float-breakpoint ook naar hun mobiele versie te wijzigen.

De eenvoudigste manier is om bootstrap aan te passen

variabele zoeken:

@grid-float-breakpoint

die is ingesteld op @screen-sm, kunt u deze naar wens wijzigen. Ik hoop dat het helpt!

Voor SAAS-gebruikers

voeg uw aangepaste variabelen toe, zoals $grid-float-breakpoint: 0px;vóór de @import "bootstrap.scss";

Antwoord 3, autoriteit 4%

Hier is een benadering waarbij het standaard samenvouwgedrag ongewijzigd blijft, terwijl een nieuw navigatiegedeelte altijd zichtbaar blijft. Het is een uitbreiding van navbar; navbar-header-menuis een CSS-klasse die ik heb gemaakt en maakt geen deel uit van de eigenlijke Bootstrap.

Plaats dit in het navbar-headerelement na 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>

Voeg deze CSS toe:

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

Controleer de viool: http://jsfiddle.net/L2txunqo/

Voorbehoud: navbar-rightkan worden gebruikt om elementen visueel te sorteren, maar het is niet gegarandeerd dat het element naar het meest rechtse gedeelte van het scherm wordt getrokken. De viool demonstreert dat gedrag met de navbar-form.

Antwoord 4

Een andere manier is om eenvoudig collapse navbar-collapseuit de opmaak te verwijderen. Voorbeeld met 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>

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

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

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