web-dev-qa-db-fra.com

comment personnaliser la largeur du champ de saisie dans bootstrap 3

Après avoir supprimé les fonctionnalités critiques telles que input-xlarge et input-large, quelle est sa substitution dans bootstrap 3?

Bien sûr, je pourrais utiliser col-lg-12 etc., mais cela donne une erreur dans le volet des onglets.

Je pourrais aussi utiliser style = "width:30px; "mais il perdrait alors sa réactivité contrairement à input-xlarge. Avez-vous des suggestions, etc.?

textinputtwitter-bootstrap-3
47
user2754528

Dans Bootstrap 3, .form-control (la classe que vous donnez à vos entrées) a une largeur de 100%, ce qui vous permet de les envelopper dans des divs col-lg-X pour les organiser. Exemple tiré de la documentation:

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

Voir sous Dimensionnement des colonnes .

C'est un peu différent de Bootstrap 2.3.2, mais vous vous habituez vite.

64
Alexander Rechsteiner

Vous pouvez utiliser ces classes

entrée-lg

contribution

et 

entrée-sm

pour les champs de saisie et remplacez input par btn pour les boutons.

Consultez cette documentation http://getbootstrap.com/getting-started/#migration

Cela ne modifiera que la hauteur de l'élément. Pour réduire la largeur, vous devez utiliser des classes de système de grille telles que col-xs-* col-md-* col-lg-*. 

Exemple col-md-3. Voir doc ici http://getbootstrap.com/css/#grid

6
devo
  <form role="form">
    <div class="form-group">
      <div class="col-xs-2">
        <label for="ex1">col-xs-2</label>
        <input class="form-control" id="ex1" type="text">
      </div>
      <div class="col-xs-3">
        <label for="ex2">col-xs-3</label>
        <input class="form-control" id="ex2" type="text">
      </div>
      <div class="col-xs-4">
        <label for="ex3">col-xs-4</label>
        <input class="form-control" id="ex3" type="text">
      </div>
    </div>
  </form>
2
Andrew Koper

j'ai résolu avec un max-width dans mon fichier css principal. 

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

C'est une solution simple avec peu de "code"

1
Edi G.
<div class="form-group">
                    <div class="input-group col-md-5">
                    <div class="input-group-addon">
                    <span class="glyphicon glyphicon-envelope"></span> 
            </div>
                        <input class="form-control" type="text" name="text" placeholder="Enter Your Email Id" width="50px">

                    </div>
                    <input type="button" name="SIGNUP" value="SIGNUP">
            </div>
0
naveesh