0

我正在尝试使用 twitter bootstrap 创建一个响应式应用程序。
我添加了一个带有几个下拉菜单和 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

您熟悉如何在 Bootstrap 响应式中使用媒体查询吗？在某个点以下，这些按钮被设置为 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 回答