web-dev-qa-db-fra.com

Contenu du centre de Bootstrap row

J'ai le code ci-dessous et je voudrais centrer les "bien" éléments de la "rangée" externe div. J'ai essayé diverses approches telles que text-align: center (centré sur le texte et non sur les éléments DIV internes.

Voici un jsfiddle . L'idée est que je reçoive une page de "bien" tuiles et qu'après 4 ou alors ça enveloppe. Mais s'il est inférieur à 4, ils doivent apparaître centrés sur la page.

<body class="container-fluid">
    <div class="row">
        <div class="well span2">
            <div class="row">
                <div class="span2">
                    Header
                </div>
            </div>
            <div class="row">
                <div class="span2">
                    Sub Header
                </div>
            </div>

        </div>

        <div class="well span2">
            <div class="row">
                <div class="span2">
                    Header
                </div>
            </div>
            <div class="row">
                <div class="span2">
                    Sub Header
                </div>
            </div>
        </div>
    </div>
</body>
twitter-bootstrapcenter
33
Gregg

J'ai résolu ceci en procédant comme suit:

<body class="container-fluid">
    <div class="row">
        <div class="span6" style="float: none; margin: 0 auto;">
           ....
        </div>
    </div>
</body>
54
Gregg

Avec Bootstrap 4, il existe une classe css spécialement conçue à cet effet. Le contenu de la ligne ci-dessous est centré:

<div class="row justify-content-center">
  ...inner divs and content...
</div>

Voir: https://v4-alpha.getbootstrap.com/layout/grid/#horizontal-alignment , pour plus d'informations.

82
Ayo I

Essayez ceci, ça marche!

<div class="row">
    <div class="center">
        <div class="col-xs-12 col-sm-4">
            <p>hi 1!</p>
        </div>
        <div class="col-xs-12 col-sm-4">
            <p>hi 2!</p>
        </div>
        <div class="col-xs-12 col-sm-4">
            <p>hi 3!</p>
        </div>
    </div>
</div>

Ensuite, dans css, définissez la largeur de center div et center dans un document:

.center {
    margin: 0 auto;
    width: 80%;
}
14
Ezequiel

Pour Bootstrap 4, utilisez le code ci-dessous:

<div class="mx-auto" style="width: 200px;">
  Centered element
</div>

Réf.: https://getbootstrap.com/docs/4.0/utilities/spacing/#horizontal-centering

10
Fakhruddin Ujjainwala