web-dev-qa-db-fra.com

Centrer l'alignement d'une colonne dans Twitter bootstrap

J'ai commencé à apprendre Bootstrap. Ma question est de savoir comment centrer une colonne horizontalement, bootstrap contient 12 colonnes de disposition, il n'y a pas de nombre du milieu. Pour être plus clair s'il s'agissait d'une disposition à 11 colonnes, le nombre du milieu aurait été 6 (5 colonnes à gauche, 1 colonne du milieu, 5 colonnes à droite)

twitter-bootstrapalignment
55
Sharath Daniel

La question reçoit une réponse correcte ici Centrez une colonne en utilisant Twitter Bootstrap

Pour les lignes impaires: c'est-à-dire que col-md-7 ou col-large-9 utilise ceci

Ajoutez col-centré à la colonne que vous souhaitez centrer.

<div class="col-lg-11 col-centered">

Et ajoutez ceci à votre feuille de style:

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

Pour les lignes paires: c'est-à-dire que col-md-6 ou col-large-10 utilise ceci

Utilisez simplement la classe de cols offset de bootstrap3. c'est à dire.,

<div class="col-lg-10 col-lg-offset-1">
101
Lawrence Black

Avec bootstrap 3, le meilleur moyen d’atteindre ce que vous voulez est de ... avec des colonnes de décalage . Veuillez voir ces exemples pour plus de détails:
http://getbootstrap.com/css/#grid-offsetting

En bref, et sans voir vos divs, voici un exemple de ce qui pourrait aider, sans utiliser de classes personnalisées. Notez juste comment " col-6 " est utilisé et comment la moitié est 3 ... donc le " offset-3 "est utilisé. La division égale permet l’espacement centré que vous recherchez:

<div class="container">
<div class="col-sm-6 col-sm-offset-3">
your centered, floating column
</div></div>
23
martenc

Si vous ne pouvez pas mettre 1 colonne, vous pouvez simplement mettre 2 colonne au milieu ... (Je ne fais que combiner des réponses) Pour Bootstrap 3

<div class="row">
   <div class="col-lg-5 ">5 columns left</div>
   <div class="col-lg-2 col-centered">2 column middle</div>
   <div class="col-lg-5">5 columns right</div>
</div>

Même, vous pouvez texte centré colonne en ajoutant ceci à style:

.col-centered{
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

De plus, il existe une autre solution ici

10
efirat

J'ai essayé les approches données ci-dessus, mais ces méthodes échouent lorsque la hauteur du contenu de l'un des colonnes augmente de façon dynamique, ce qui pousse fondamentalement les autres colonnes vers le bas.

pour moi, la solution de base de mise en page de table a fonctionné.

// Apply this to the enclosing row
.row-centered {
  text-align: center;
  display: table-row;
}
// Apply this to the cols within the row
.col-centered {
  display: table-cell;
  float: none;
  vertical-align: top;
}
0
SkyKOG