webentwicklung-frage-antwort-db.com.de

Center Contents of Bootstrap row container

Ich habe den folgenden Code und möchte die "well" -Elemente der äußeren "row" div zentrieren. Ich habe verschiedene Ansätze ausprobiert, z. B. Text ausrichten: zentrieren (wobei nur der Text und nicht die inneren DIV-Elemente zentriert werden.

Hier ist ein jsfiddle . Die Idee ist, dass ich eine Seite mit "gut" Kacheln bekomme und dass sie nach ungefähr 4 umbrochen wird. Wenn es jedoch weniger als 4 sind, sollten sie auf der Seite zentriert erscheinen.

<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

Ich habe das folgendermaßen gelöst:

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

Mit Bootstrap 4 gibt es speziell dafür eine CSS-Klasse. Im Folgenden wird der Zeileninhalt zentriert:

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

Weitere Informationen finden Sie unter: https://v4-alpha.getbootstrap.com/layout/grid/#horizontal-alignment .

82
Ayo I

Probieren Sie es aus, es funktioniert!

<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>

Definieren Sie dann in CSS die Breite von center div und center in einem Dokument:

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

Verwenden Sie für Bootstrap 4 den folgenden Code:

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

Ref: https://getbootstrap.com/docs/4.0/utilities/spacing/#horizontal-centering

10
Fakhruddin Ujjainwala