Bootstrap: champ de saisie plus large

Comment puis-je rendre le champ de saisie plus large que celui par défaut dans le Bootstrap de Twitter?

J’essaie de créer un formulaire de recherche plus large dans la classe des hero-unit de l’ exemple .

Utilisez les classes bootstrap intégrées input-large , input-medium , …:

Ou utilisez votre propre css:

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

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

  :class=>"input-mini" :class=>"input-small" :class=>"input-medium" :class=>"input-large" :class=>"input-xlarge" :class=>"input-xxlarge" 

dans bootstrap 3.0:

Définissez des hauteurs à l’aide de classes telles que .input-lg et définissez des largeurs à l’aide de classes de colonnes de grid telles que .col-lg- *.

Exemple:

 

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

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

  

De cette façon, vous n’avez pas besoin du css personnalisé supplémentaire mentionné précédemment.

Il y a aussi une plus petite encore appelée “input-mini”.

Je vais supposer que vous aviez le même problème que moi. Même si vous spécifiez des tailles plus grandes pour le TextBox et que vous le marquez comme important, la boîte ne sera pas plus grande. Cela est probablement dû au fait que dans votre fichier site.css, MaxWidth est défini sur 280px.

Ajoutez un atsortingbut de style à votre entrée pour supprimer le MaxWidth comme ceci: