web-dev-qa-db-fra.com

Centrage Bootstrap)

Je suis nouveau avec ça. Surtout avec bootstrap. J'ai ce code:

<div class="row">
    <div class="col-lg-3">
       <div class="input-group">
         <input type="text" class="form-control">
         <span class="input-group-btn">
             <button class="btn btn-default" type="button">Go!</button>
         </span>
       </div><!-- /input-group -->
    </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

On webpage it looks like this
Je dois mettre ce champ de saisie et ce bouton au centre de la page ... "margin-left: auto; margin-right: auto;" n'a pas fonctionné ... quelqu'un a-t-il une idée?

htmlcsstwitter-bootstraptwitter-bootstrap-3
52
Ivan Vulović

Vous pouvez utiliser des décalages pour faire apparaître une colonne centrée. Utilisez simplement un décalage égal à la moitié de la taille restante de la ligne. Dans votre cas, je vous suggérerais d'utiliser col-lg-4 avec col-lg-offset-4, c'est (12-4)/2.

<div class="row">
    <div class="col-lg-4 col-lg-offset-4">
        <div class="input-group">
            <input type="text" class="form-control" /> 
            <span class="input-group-btn">
                <button class="btn btn-default" type="button">Go!</button>
            </span>
        </div><!-- /input-group -->
    </div><!-- /.col-lg-4 -->
</div><!-- /.row -->

Violon de démonstration

Notez que cette technique ne fonctionne que pour des tailles de colonne égales (.col-X-2, .col-X-4, col-X-6, etc ...), si vous voulez supporter n'importe quelle taille, vous pouvez utiliser margin: 0 auto; mais vous devez également supprimer le float de l'élément, je recommande une classe CSS personnalisée comme celle-ci:

.col-centered{
    margin: 0 auto;
    float: none;
}

Violon de démonstration

107
koala_dev

Essayez d’appliquer ce style à votre div class="input-group":

text-align:center;

Voir le: violon .

8
gsubiran

La meilleure façon de centrer votre élément est d'utiliser .center-block classe d'assistance. Mais il faut que votre bootstrap ne soit pas inférieure à .1.1

<link href="https://cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet" />
<div class="row">
  <div class="col-lg-3 center-block">
    <div class="input-group">
      <input type="text" class="form-control">
      <span class="input-group-btn">
             <button class="btn btn-default" type="button">Go!</button>
         </span>
    </div>
    <!-- /input-group -->
  </div>
  <!-- /.col-lg-6 -->
</div>
<!-- /.row -->
6
Shwan Namiq

Ok, c'est la meilleure solution pour moi. Bootstrap inclut un système de grille de fluide mobile qui s'adapte de manière appropriée jusqu'à 12 colonnes à mesure que la taille du périphérique ou de la fenêtre d'affichage augmente. Cela fonctionne donc parfaitement sur tous les navigateurs et périphériques:

        <div class="row">
            <div class="col-lg-4"></div>
            <div class="col-lg-4">
                <div class="input-group">
                    <input type="text" class="form-control" /> 
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button">Go!</button>
                    </span>
                </div><!-- /input-group -->
            </div><!-- /.col-lg-4 -->
            <div class="col-lg-4"></div>
        </div><!-- /.row -->

Cela signifie 4 + 4 + 4 = 12 ... donc la deuxième division sera au milieu de cette façon.

Exemple: http://jsfiddle.net/jpGwm/embedded/result/

4
Ivan Vulović

Pour moi, cette solution a bien fonctionné pour centrer un champ de saisie dans un TD:

<link href="https://cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet" />
<td style="background:#B3AEB5;">
  <div class="form-group text-center">
    <div class="input-group" style="margin:auto;">
      <input type="month" name="p2" value="test">
    </div>
  </div>
</td>
3
Cagy79

Essayez d'utiliser ce code:

.col-lg-3 {
  width: 100%;
}
.input-group {
   width: 200px; // for exemple
   margin: 0 auto;
}

si cela n'a pas fonctionné, utilisez! important

2
RDK