Bootstrap : champ de saisie plus large

Question

Comment rendre le champ de saisie plus large que la valeur par défaut dans Bootstrap de Twitter ?

J'essaye de créer un formulaire de recherche plus large dans le hero-unit de la classe exemple .

Answer 1

Il existe différentes classes pour des entrées de taille différente

 :class=>"input-mini"

 :class=>"input-small"

 :class=>"input-medium"

 :class=>"input-large"

 :class=>"input-xlarge"

 :class=>"input-xxlarge"

Answer 2

Utilisez les classes intégrées au bootstrap entrée-large , entrée-moyen , ... : <input type="text" class="input-large search-query">

Ou utilisez votre propre css :

1. Donnez à l'élément un nom de classe unique class="search-query input-mysize"
2. Ajoutez ceci dans votre fichier css (pas dans les fichiers bootstrap.less ou css) :
   .input-mysize { width: 150px }

Answer 3

Dans bootstrap 3.0 :

Définissez les hauteurs à l'aide de classes telles que .input-lg, et définissez les largeurs à l'aide de classes de colonnes de grille telles que .col-lg-*.

Exemple :

<div class="row">
    <div class="col-xs-2">
        <input type="text" class="form-control" placeholder=".col-xs-2">
    </div>
    <div class="col-xs-3">
        <input type="text" class="form-control" placeholder=".col-xs-3">
    </div>
    <div class="col-xs-4">
        <input type="text" class="form-control" placeholder=".col-xs-4">
    </div>
</div>

Source : http://getbootstrap.com/css/#forms-control-sizes

Answer 4

J'ai créé un champ de saisie plus large en utilisant soit span4 soit span6 comme classe.

<input type="text" class="span6 input-large search-query">

De cette façon, vous n'avez pas besoin de la css personnalisée supplémentaire, mentionnée plus haut.

Answer 5

Il en existe également un plus petit encore appelé "input-mini".