如何調整移動設備上的按鈕大小？

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。