Make Bootstrap 3.0 NavBar content always collapsed

问题:

I need to make a section of a NavBar of Bootstrap 3.0 always collapsed.

Actual sections of the navbar:

• Links
• Search Form
• Login Form

When I open the website in a phone I see the three sections collapsed and I have three icons to collapse each of this content.

When I open the page in a PC i see the three sections in the bar visibles (not the buttons to collapse). What I need? In PC view only hide the Login form and show the button to collapse that login form. No matter the resolution i need to have the login button always visible and the section collapsed. This is my actual code:

<nav class="navbar navbar-inverse" role="navigation">
    <div class="navbar-header">
        <!--Toggles -->
        <button type="button" class="navbar-toggle boton" 
                data-toggle="collapse" data-target="#sesion">
            <span class="glyphicon glyphicon-user"></span>
        </button>
        <button type="button" class="navbar-toggle boton"
                data-toggle="collapse" data-target="#links" id="menuToggle">
            <span class="glyphicon glyphicon-align-justify"></span>
        </button>
        <button type="button" class="navbar-toggle boton" 
                data-toggle="collapse" data-target="#buscar">
            <span class="glyphicon glyphicon-search"></span>
        </button>
        <!--Logo en vista Mobile -->
        <a class="navbar-brand" style="padding: 10px 0 0 15px" href="#">
            <span class="visible-xs">
                <img src="img/nsnow.png" width="37" height="36" alt="Logo" />
            </span>
        </a>
    </div>

    <ul class="collapse navbar-collapse nav navbar-nav" id="links">
        <!--Links -->
        <li><a style="padding-left: 40px"></a></li>
        <li class="botonMenu" id="boton_generos"><a >Géneros</a></li>
        <li class="botonMenu" id="boton_categorias"><a >Categorías</a></li>
        <li class="botonMenu" id="boton_senales"><a >Señales</a></li>
    </ul>

    <div class="collapse navbar-collapse" id="buscar">
        <!--Buscar -->
        <form class="navbar-form navbar-right" role="search">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Buscar">
            </div>
            <button type="submit" class="btn boton">
                <span class="glyphicon glyphicon-search"></span>
            </button>
        </form>
    </div>

    <div class="collapse navbar-collapse" id="sesion">
        <!--Buscar -->
        <form class="navbar-form navbar-right" role="search">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Usuario">
                <input type="text" class="form-control" placeholder="Contraseña">
            </div>
            <button type="submit" class="btn boton">
                <span class="glyphicon glyphicon-search"></span>
            </button>
         </form>
     </div>
</nav>

回答1:

You have to override some css to make it stay collapsed

http://jsbin.com/UpeZazi/1/edit

In this example i made the "user login" button stay collapsed.

css:

@media (min-width: 768px) {
  #login-btn {
    display: block;
  }

  #sesion.collapse {
    display: none !important;
  }
}

html:

basically the same except i added the id login-btn to your login user button element:

<button type="button" id="login-btn" class="navbar-toggle boton" data-toggle="collapse" data-target="#sesion">
    <span class="glyphicon glyphicon-user"></span>
 </button>

回答2:

For those using LESS, head to variables.less and change:

@grid-float-breakpoint:     @screen-sm-min;

to:

@grid-float-breakpoint:     999999999px;

One line change that works like a charm. Just be sure to use an unrealistically large number of pixels (em did not work for me).

回答3:

Try this:

.navbar-toggle {
    display: block;
}

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

回答4:

Based on @cfx answer, overriding variable grid-float-breakpoint (which I prefer) using SASS:

$grid-float-breakpoint:     999999999px;

回答5:

Case you can't change the less variables, you can also override the bootstrap classes after 768px(smartphone bounder). Bellow is the working code that overrides basic navbars with dropdown menus. Not all classes are overriden bellow, so depending on what you are using, you may need to override other classes.

    @media (min-width: 768px){
        .navbar-nav .open .dropdown-menu {
            position: static;
            float: none;
            width: auto;
            margin-top: 0;
            background-color: transparent;
            border: 0;
            -webkit-box-shadow: none;
            box-shadow: none;
        }
        .navbar-nav .open .dropdown-menu > li > a {
            line-height: 20px;
        }
        .navbar-nav .open .dropdown-menu > li > a,
        .navbar-nav .open .dropdown-menu .dropdown-header {
            padding: 5px 15px 5px 25px;
        }
        .dropdown-menu > li > a {
            display: block;
            padding: 3px 20px;
            clear: both;
            font-weight: normal;
            line-height: 1.42857143;
            color: #333;
            white-space: nowrap;
        }
        .navbar-header {
            float: none;
        }
        .navbar-toggle {
            display: block;
        }
        .navbar-collapse {
            border-top: 1px solid transparent;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
        }
        .navbar-collapse.collapse {
            display: none!important;
        }
        .navbar-nav {
            float: none!important;
            /*margin: 7.5px -15px;*/
            margin: 7.5px 50px 7.5px -15px
        }
        .navbar-nav>li {
            float: none;
        }
        .navbar-nav>li>a {
            padding-top: 10px;
            padding-bottom: 10px;
        }
        .navbar-text {
            float: none;
            margin: 15px 0;
        }
        /* since 3.1.0 */
        .navbar-collapse.collapse.in { 
            display: block!important;
        }
        .collapsing {
            overflow: hidden!important;
        }
    }

click here for the live demo code