Comment redimensionner un bouton sur un appareil mobile?

Question

J'essaye de créer une application réactive avec le bootstrap de Twitter.
J'ai ajouté une barre de recherche avec quelques listes déroulantes et 2 boutons de recherche.
Je voudrais afficher la barre avec les éléments en ligne dans un navigateur (bureau) et maximiser la taille de chaque champ lorsqu'il est affiché sur un appareil mobile.

Je n'ai aucun problème avec la version de bureau:

mais je ne peux pas obtenir ce que je veux quand les fenêtres sont redimensionnées (mobile)

les listes déroulantes sont ok mais je ne sais pas comment avoir le même effet avec les boutons de recherche. Mes listes déroulantes ont une classe span2 définie. Puis-je utiliser la même classe pour un bouton? Au début de mon expérience, j'utilisais une barre de navigation, mais je ne pouvais pas obtenir ce que je voulais.

Certains HTML ici:

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

J'ai créé un fiddle pour cela.

Merci.

Answer 1

Savez-vous comment les requêtes multimédias sont utilisées dans Bootstrap Responsive? Au-dessous d'un certain point, ces boutons sont réglés à une largeur de 100%. Vous avez juste besoin de remplacer comme vous le souhaitez.

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

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

Ici, j'ai pilonné mon override en place avec! Important, mais vous devez vraiment régler les questions des médias à faire ce que vous voulez à différentes tailles. C'est juste pour vous aider à démarrer.

Answer 2

J'ai décidé de ne pas utiliser une barre de navigation régulière mais de créer une barre de navigation personnalisée.

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

et c'est le 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%; 
    } 

} 

C'est le violon de travail this.