Question

我需要让Bootstrap 3.0 NavBar的一部分始终崩溃。

导航栏的实际部分：

链接
搜索表单
登录表格

当我在手机中打开网站时，我看到三个部分已折叠，我有三个图标可以折叠这些内容。

当我在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>

Answer 1

对于那些使用LESS的人，请前往variables.less并更改：

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

为：

@grid-float-breakpoint:     999999999px;

一个像魅力一样的线条变化。请务必使用不切实际的大量像素（这对我来说不起作用）。

Answer 2

你必须覆盖一些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>

Answer 3

试试这个：

.navbar-toggle {
    display: block;
}

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

Answer 4

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

$grid-float-breakpoint:     999999999px;

Answer 5

如果您无法更改较少的变量，您也可以在768px（智能手机bounder）之后覆盖引导类。 Bellow是使用下拉菜单覆盖基本导航栏的工作代码。并非所有类都被覆盖，因此根据您使用的内容，您可能需要覆盖其他类。

For each cell in Sheets("1").Range("A1:B3")
    cell.Value = "Test"
Next cell

click here for the live demo code

使Bootstrap 3.0 NavBar内容始终崩溃

5 个答案: