如何调整移动设备上的按钮大小？

Question

我正试图用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> 

我已经创建了一个fiddle。

谢谢。

Answer 1

您是否熟悉在Bootstrap Responsive中如何使用媒体查询？在某个点以下，这些按钮被设置为100％宽度。您只需根据需要进行覆盖。

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

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

在这里，我敲打我的覆盖与地方！重要的，但你真的应该调整媒体查询你想在各种大小的东西。这只是为了让你开始。

Answer 2

我决定不使用常规导航栏，而是创建一个自定义导航栏。

<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。