1

画面が小さいときにナビゲーションバーのリンクを折りたたむために、ブートストラップレスポンシブナビゲーションバーを使用しています。ただし、ボタンと検索ボックスを折りたたまれた領域の外に置きたいと思っています。これは私のコードです:

<div class="navbar navbar-inverse navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container-fluid">                    
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>

               <a class="brand" href="/">site name</a>

                <div class="nav-collapse">
                    <ul class="nav">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Other</a></li>    
                    </ul>
                </div>

                <form action="#" class="navbar-search pull-left">
                    <input name="search" class = "search-query" />
                </form>

                <div class="btn-group pull-right">
                    <button class="btn btn-primary">Log In</button>
                </div>
            </div>
        </div>      
    </div>

これは通常の画面では問題ないように見えますが、リンクが折りたたまれると、ボタンと検索ボックスが強制的に下に表示され、ナビゲーションの高さが 2 倍になります。

検索ボックスを nav-collapse リンクの左側に移動すると問題なく動作しますが、最初にリンクを表示する必要があります。

これを達成する方法はありますか？

4

1 に答える 1

1

テストしないとわかりませんがwhite-space: nowrap、コンテナーにスタイルを追加してみることができます。

<div class="container-fluid nowrap">

CSS:

.nowrap { white-space: nowrap; }



編集:
いくつかのテストを行いましたが、これはあなたが探している動作をエミュレートすると思います:

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container-fluid">                    
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>

           <a class="brand" href="/">site name</a>

           <div class="btn-group pull-right">
                <button class="btn btn-primary">Log In</button>
            </div>
            <div class="pull-left">
           <form action="#" class="navbar-search pull-right">
                <input name="search" class = "search-query" />
            </form>

            <div class="nav-collapse pull-right">
                <ul class="nav">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Other</a></li>    
                </ul>
            </div>
            </div>
        </div>
    </div>      
</div>

CSS:

@media (max-width: 979px) {
    .navbar .btn-navbar { float: left !important; }
    .navbar-search { float: left; }
}


基本的には、リンクと検索バーを右にフロートさせ、左にフロートする div でラップします(画面幅 > 979px での現在の動作を模倣するため)。次に、改行を避けるために、ウィンドウが縮小されたときに
リンクと検索バーを左にフロートさせます。

検索バーが広すぎて残りのコンテンツに収まらないため、画面幅が非常に狭い場合でも壊れます。それに応じて幅をオーバーライドすることで、これを防ぐことができます。
例えば：

.search-query { width: 150px !important }
于 2012-09-24T17:37:51.513 に答える