Как изменить размер кнопки на мобильном устройстве?

Question

Я пытаюсь создать отзывчивое приложение с twitter bootstrap.
Я добавил панель поиска с несколькими выпадающими меню и двумя кнопками поиска.
Я хотел бы отобразить панель с элементами в строке в браузере (рабочий стол) и максимизировать размер каждого поля при отображении на мобильном устройстве.

У меня нет какого-либо проблем с настольной версией:

, но я не могу добиться того, чего я хочу, когда окно изменяется (мобильный)

выпадающие списки в порядке, но я не знаю, как иметь тот же эффект с кнопками поиска.
Мои выпадающие списки имеют класс 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.