使Bootstrap 3.0导航栏内容始终折叠

ubof19bj 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(5)|浏览(142)

我需要使Bootstrap 3.0的导航栏的一部分始终处于折叠状态。
导航栏的实际部分：

链接
搜寻表单
登录表单

当我在手机中打开网站时，我看到三个部分折叠起来，我有三个图标来折叠每个内容。
当我在PC上打开页面时，我看到了三个可见的部分（不是折叠的按钮）。我需要什么？在PC视图中只隐藏登录窗体，并显示折叠登录窗体的按钮。无论分辨率如何，我都需要登录按钮始终可见，部分折叠。这是我的实际代码：

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

twitter-bootstrap

来源：https://stackoverflow.com/questions/18896591/make-bootstrap-3-0-navbar-content-always-collapsed

5条答案

按热度按时间

xtupzzrd1#

对于使用LESS的用户，请转到variables.less并更改：

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

至：

@grid-float-breakpoint:     999999999px;

一行的变化，工作起来像一个魅力。只是一定要使用一个不现实的大量像素（em没有为我工作）。

赞(0）回复(0）举报 2022-12-07

nr9pn0ug2#

你必须重写一些css使它保持折叠状态
http://jsbin.com/UpeZazi/1/edit
在本例中，我使“用户登录”按钮保持折叠状态。
CSS：

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

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

HTML格式：
基本相同，只是我在登录用户按钮元素中添加了id login-btn：

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

赞(0）回复(0）举报 2022-12-07

4si2a6ki3#

试试这个：

.navbar-toggle {
    display: block;
}

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

赞(0）回复(0）举报 2022-12-07

kwvwclae4#

基于@cfx答案，使用SASS覆盖变量grid-float-breakpoint（我更喜欢）：

$grid-float-breakpoint:     999999999px;

赞(0）回复(0）举报 2022-12-07

o75abkj45#

如果你不能改变更少的变量，你也可以覆盖768px（智能手机边界）之后的引导类。Bellow是用下拉菜单覆盖基本导航栏的工作代码。不是所有的类都覆盖bellow，所以根据你正在使用的，你可能需要覆盖其他类。

@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

赞(0）回复(0）举报 2022-12-07

我来回答

使Bootstrap 3.0导航栏内容始终折叠

5条答案

相关问题

热门标签

最新问答