twitter bootstrap max largeur de champ de saisie

J'ai eu une suite mis en place en utilisant les dernières twitter bootstrap cadre:

http://jsfiddle.net/hfexR/2/

Je veux maintenant que le champ de saisie prend la largeur maximale quand il n'y a pas de bouton à côté de l'.

Comment puis-je faire cela avec de la pure css ou avec twitter bootstrap lui-même?

Quelque chose comme inline-block devrait aller, je n'ai tout simplement pas le faire pour le moment...

Vous ne devriez pas mélanger .span4 et .well. Avez-vous essayé d'utiliser un .row-fluid et s'étend à l'intérieur du bien ?
1. Quoi de mal combinaison de durée et de puits 2. pourriez-vous me donner un exemple

OriginalL'auteur bodokaiser | 2012-08-25

  1. 1

    EDIT : depuis bootstrap v3, les cours ont évolué afin d'utiliser col-xxx classes pour obtenir le résultat expliqué ci-dessous (d'autres modifications peuvent être nécessaires)

    Démonstration en direct (jsfiddle)

    Vous pouvez utiliser un .row-fluid et l'utilisation .spanX pour faire les entrées de remplissage du conteneur :

    <form class="form-search">
  <div class="row-fluid">
      <input type="text" class="input-medium search-query span12">
  </div>
</form>
<form class="form-search">
  <div class="row-fluid">
      <input type="text" class="input-medium search-query span8">
      <button type="submit" class="btn span4">Cancel</button>
  </div>
</form>

    Il semble qu'un peu de correction est nécessaire pour le bouton d'entrée/de combinaison :

    /* May not be the best way, not sure if BS has a better solution */
/* Fix for combining input and button spans in a row */
.row-fluid > input + button[class*="span"] {
    float: none;           /* Remove the */
    display: inline-block; /* floating   */
    margin-left: 0;        /* Stick it to the left */
}

    Dernière chose, vous ne devriez pas mélanger .spanX et .well en raison de la padding et des frontières et d'autres choses, voici pourquoi, par exemple, (jsfiddle).

    La durée de classes ont été supprimées dans le bootstrap 3.
    en effet, les classes ont changé, mais l'esprit de la réponse est la même, voir col-xxx classes et associés

    OriginalL'auteur Sherbrow

  2. 2

    Vous pouvez utiliser te classe d'entrée-niveau des blocs comme dans cette violon

    <div class="container">
  <div class="span4 well">
    <form class="form-search">
      <input type="text" class="input-block-level search-query">
    </form>
    <form class="form-search">
      <input type="text" class="input-medium search-query">
      <button type="submit" class="btn">Cancel</button>
    </form>
  </div>
</div>
    Yep, d'entrée de niveau bloc fait le tour et qu'il est correctement adapté. stackoverflow.com/questions/11232627/...

    OriginalL'auteur nelsito