web-dev-qa-db-fra.com

Bootstrap entrée de texte pleine largeur dans le formulaire en ligne

J'ai du mal à créer une zone de texte qui occupe toute la largeur de ma zone conteneur.

<div class="row">
    <div class="col-md-12">
        <form class="form-inline" role="form">           
                <input type="text" class="form-control input-lg" id="search-church" placeholder="Your location (City, State, Zip)">
                <button type="submit" class="btn btn-lg">Search</button>            
        </form>
    </div>
</div>

Lorsque je fais ce qui précède, les deux éléments de formulaire sont en ligne, comme je l’attendais, mais ne prennent pas plus de quelques colonnes, au mieux. En survolant le col-md-12 div dans firebug, cela montre qu'il occupe toute la largeur attendue. C'est juste la saisie de texte qui ne semble pas remplir. J'ai même essayé d'ajouter une valeur de largeur en ligne mais cela ne changeait rien. Je sais que cela devrait être simple, juste me sentir vraiment stupide maintenant.

Voici un violon: http://jsfiddle.net/52VtD/4119/embedded/result/

EDIT:

La réponse choisie est approfondie dans tous les sens et une aide précieuse. C'est ce que j'ai fini par utiliser. Cependant ​​Je pense que mon problème initial était en fait un problème avec le modèle MVC5 par défaut dans Visual Studio 2013. Il contenait ceci dans Site.css:

input,
select,
textarea {
    max-width: 280px;
}

Évidemment, cela empêchait la saisie de texte de se développer correctement ... Avertissement juste pour les futurs utilisateurs de modèles ASP.NET ...

htmlcsstwitter-bootstrap-3
134
Killnine

Le bootstrap _ docs dit à ce sujet :

Requiert des largeurs personnalisées Les entrées, les sélections et les zones de texte sont 100% larges par défaut dans Bootstrap. Pour utiliser le formulaire en ligne, vous devez définir une largeur pour les contrôles de formulaire utilisés dans.

La largeur par défaut de 100% que tous les éléments de formulaire obtiennent lorsqu'ils obtiennent la classe form-control ne s'applique pas si vous utilisez la classe form-inline sur votre formulaire.

Vous pouvez consulter le fichier bootstrap.css (ou .less, celui que vous préférez) où vous trouverez cette partie:

.form-inline {

  // Kick in the inline
  @media (min-width: @screen-sm-min) {
    // Inline-block all the things for "inline"
    .form-group {
      display: inline-block;
      margin-bottom: 0;
      vertical-align: middle;
    }

    // In navbar-form, allow folks to *not* use `.form-group`
    .form-control {
      display: inline-block;
      width: auto; // Prevent labels from stacking above inputs in `.form-group`
      vertical-align: middle;
    }
    // Input groups need that 100% width though
    .input-group > .form-control {
      width: 100%;
    }

    [...]
  }
}

Peut-être devriez-vous jeter un oeil à input-groups , car je suppose qu'ils ont exactement le balisage que vous voulez utiliser (travail de violon ici ):

<div class="row">
   <div class="col-lg-12">
    <div class="input-group input-group-lg">
      <input type="text" class="form-control input-lg" id="search-church" placeholder="Your location (City, State, Zip)">
      <span class="input-group-btn">
        <button class="btn btn-default btn-lg" type="submit">Search</button>
      </span>
    </div>
  </div>
</div>
85
morten.c

regardez quelque chose comme ça:

<form role="form">  
    <div class="row">
      <div class="col-xs-12">
        <div class="input-group input-group-lg">
            <input type="text" class="form-control" />
          <div class="input-group-btn">
            <button type="submit" class="btn">Search</button>
          </div><!-- /btn-group -->
        </div><!-- /input-group -->
      </div><!-- /.col-xs-12 -->
    </div><!-- /.row -->
</form>

http://jsfiddle.net/n6c7v/1/

30
haxxxton

Comme indiqué dans ne question similaire , essayez de supprimer les instances de la classe input-group et voyez si cela vous aide.

se référant à bootstrap:

Les contrôles de formulaire individuels reçoivent automatiquement un style global. Tous les éléments textuels, et, avec .form-control sont réglés sur width: 100%; par défaut. Placez les étiquettes et les contrôles dans le groupe de formes pour un espacement optimal.

9
kurdtpage