7

Bootstrap 3.0 の NavBar のセクションを常に折りたたむ必要があります。

navbar の実際のセクション:

  • リンク
  • 検索フォーム
  • ログインフォーム

電話で Web サイトを開くと、3 つのセクションが折りたたまれているのが見えます。このコンテンツのそれぞれを折りたたむための 3 つのアイコンがあります。

PC でページを開くと、バーに 3 つのセクションが表示されます (折りたたむボタンではありません)。何が必要ですか？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>
4

5 に答える 5

9

LESS を使用している場合は、以下に移動しvariables.lessて変更します。

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

に：

@grid-float-breakpoint:     999999999px;

魅力のように機能する1行の変更。非現実的なほど多くのピクセルを使用するようにしてください (em はうまくいきませんでした)。

于 2014-05-15T01:58:13.293 に答える
7

折りたたまれたままにするには、いくつかのcssをオーバーライドする必要があります

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

この例では、「ユーザー ログイン」ボタンを折りたたんだままにしました。

CSS:

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

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

html:

login-btnログインユーザーボタン要素にIDを追加したことを除いて、基本的に同じです：

<button type="button" id="login-btn" class="navbar-toggle boton" data-toggle="collapse" data-target="#sesion">
    <span class="glyphicon glyphicon-user"></span>
 </button>
于 2013-09-19T16:03:05.187 に答える
4

これを試して：

.navbar-toggle {
    display: block;
}

.navbar-collapse.collapse {
    display: none !important;
}
于 2015-06-04T11:09:21.650 に答える