gpt4 book ai didi

twitter-bootstrap - 使 Bootstrap 3.0 NavBar 内容始终折叠

转载 作者:行者123 更新时间:2023-12-04 13:08:22 26 4
gpt4 key购买 nike

我需要让 Bootstrap 3.0 的 NavBar 的一部分总是折叠。

导航栏的实际部分:

  • 友情链接
  • 查询表格
  • 登录表格

  • 当我在手机中打开网站时,我看到三个部分已折叠,并且我有三个图标来折叠每个内容。

    当我在 PC 中打开页面时,我看到栏中可见的三个部分(不是折叠按钮)。我需要的?在 PC View 中,仅隐藏登录表单并显示折叠该登录表单的按钮。无论分辨率如何,我都需要让登录按钮始终可见并且该部分已折叠。这是我的实际代码:
    <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>

    最佳答案

    对于那些使用 LESS 的人,请前往 variables.less并改变:

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

    至:
    @grid-float-breakpoint:     999999999px;

    一条线路变化就像一种魅力。请务必使用不切实际的大量 像素 (他们对我不起作用)。

    关于twitter-bootstrap - 使 Bootstrap 3.0 NavBar 内容始终折叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18896591/

    26 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com