0

Twitter ブートストラップでレスポンシブ アプリケーションを作成しようとしています。
いくつかのドロップダウンと 2 つの検索ボタンを備えた検索バーを追加しました。
ブラウザー (デスクトップ) で要素をインラインでバーを表示し、モバイル デバイスで表示するときに各フィールドのサイズを最大化したいと考えています。

デスクトップ版には何の問題もありません。

ここに画像の説明を入力

しかし、ウィンドウのサイズが変更されたときに目的を達成できません (モバイル)

ここに画像の説明を入力

ドロップダウンは問題ありませんが、検索ボタンで同じ効果を得る方法がわかりません。
私のドロップダウンにはクラスがspan2定義されています。ボタンに同じクラスを使用できますか?
実験の開始時にナビゲーションバーを使用していましたが、望みどおりの結果が得られませんでした。

ここにいくつかの HTML:

    <div class="container">
        <form action="/Home/Search" id="formSearchServices" method="post" class="form-inline">
            <input id="SearchViewModel_SearchText" name="SearchViewModel.SearchText" type="hidden" value="" />

            <div class="row-fluid">
                <select class="selectpicker span2" id="SearchViewModel_Select1" name="SearchViewModel.Select1">
                    <option value="0">** Choose **</option>
                    <option value="1">Option1</option>
                </select>
                <select class="selectpicker span2" id="SearchViewModel_Select2" name="SearchViewModel.Select2">
                    <option value="0">** Choose **</option>
                    <option value="1">Option1</option>
                </select>
                <select class="selectpicker span2" id="SearchViewModel_Select3" name="SearchViewModel.Select3">
                    <option value="0">** Choose **</option>
                    <option value="1">Option1</option>
                </select>
                <select class="selectpicker span2" id="SearchViewModel_Select4" name="SearchViewModel.Select4">
                    <option value="0">** Choose **</option>
                </select>
                <select class="selectpicker span2" id="SearchViewModel_Select5" name="SearchViewModel.Select5">
                    <option value="0">** Choose **</option>
                </select>
                <button type="submit" class="btn btn-inverse span1">Search</button>
                <a class="btn btn-small btn-info" data-toggle="collapse" href="#AdvancedSearch">Advanced search</a>

            </div>
            <div id="AdvancedSearch" class="collapse span12">

            </div>
        </form>
    </div>

そのためのフィドルを作成しました。

ありがとう。

4

2 に答える 2

1

ブートストラップ レスポンシブでメディア クエリがどのように使用されているかご存知ですか? 特定のポイントより下では、これらのボタンは 100% 幅に設定されます。必要に応じてオーバーライドするだけです。

http://jsfiddle.net/isherwood/TYNsB/1/

[class*="span"], .uneditable-input[class*="span"], .row-fluid[class*="span"] {
    width: 100px !important;
}

ここでは、オーバーライドを !important で所定の位置に叩き込みましたが、メディア クエリを実際に調整して、さまざまなサイズで必要なことを行う必要があります。これは、開始するためのものです。

于 2013-04-03T18:12:25.140 に答える
0

通常のナビゲーション バーを使用せず、カスタム ナビゲーション バーを作成することにしました。 

    <div class='searchbar'>
        <div class='searchbar-inner'>
            <div class='container'>
                <ul class="nav">
                    <li>
                        <select class="selectpicker span2" id="SearchViewModel_Select1" name="SearchViewModel.Select1">
                            <option value="0">** Choose **</option>
                            <option value="1">Option1</option>
                        </select>
                    </li>
                    <li>
                        <select class="selectpicker span3" id="SearchViewModel_Select2" name="SearchViewModel.Select2">
                            <option value="0">** Choose **</option>
                            <option value="1">Option1</option>
                        </select>
                    </li>
                    <li>
                        <button type="submit" class="btn btn-inverse">
                            Search
                        </button>
                    </li>
                    <li>
                        <button type="button" class="btn collapsed btn-small btn-info" data-toggle="collapse" href="#AdvancedSearch">
                            Advanced search 
                        </button>
                    </li>                       
                </ul>
            </div>
        </div>
    </div>

これはcssです：

.searchbar {
    overflow: visible;
    margin-bottom: 5px;
    *position: relative;
    *z-index: 2;
}

.searchbar-inner {
    min-height: 40px;
    padding-left: 20px;
    padding-right: 20px;
    .clearfix();
}

.searchbar .container {
    width: auto;
}

.searchbar .nav > li {
    float: left;
}

.searchbar .nav > li {
    padding: 5px 5px 5px 5px;
}

@media only screen and (max-width: 767px) {
    .searchbar .nav > li {
        float: none;
        display: block;
        width: 100%;
        margin-left: 0;.box-sizing(border-box);
        padding: 0;
    }

    .searchbar .nav > li > button.btn, input[type="submit"].btn {
        float: none;
        display: block;
        width: 100% !important;
    }

    .searchbar .nav > li > [class*="span"], .uneditable-input[class*="span"], .row-fluid [class*="span"] {
        -moz-box-sizing: border-box;
        display: block;
        float: none;
        margin-left: 0;
        width: 100%;
    }

}

これは作業フィドルthisです。

于 2013-04-06T10:35:32.180 に答える