Zentrieren einer Spalte mit Twitter Bootstrap

Question

Wie zentriere ich ein Div mit einer Spaltenbreite innerhalb des Containers (12 Spalten) in Twitter Bootstrap 3?

.centered {
  background-color: red;
}

Ich möchte ein div mit der Klasse .centered zentriert im Container haben. Ich kann eine Reihe verwenden, wenn es mehrere divs gibt, aber jetzt möchte ich nur ein div mit der Größe einer Spalte zentriert im Container (12 Spalten).

Ich bin mir auch nicht sicher, ob der obige Ansatz ausreicht, da die Absicht nicht darin besteht, das div um die Hälfte zu verschieben. Ich brauche keine freien Räume außerhalb des div und der Inhalt des div soll proportional schrumpfen. Ich möchte, dass der leere Raum außerhalb des Divs gleichmäßig verteilt wird (schrumpfen, bis die Containerbreite einer Spalte entspricht).

Answer 1

Sie können die sehr flexible Lösung Flexbox in Ihrem Bootstrap verwenden.

justify-content: center;

kann Ihre Spalte zentrieren.

Schauen Sie sich flex an.

Answer 2

Ich schlage vor, einfach die Klasse text-center zu verwenden:

Answer 3

Für diejenigen, die die Spaltenelemente auf dem Bildschirm zentrieren möchten, wenn Sie nicht die genaue Anzahl haben, um Ihr Raster zu füllen, habe ich ein kleines Stück JavaScript geschrieben, um die Klassennamen zurückzugeben:

function colCalculator(totalNumberOfElements, elementsPerRow, screenSize) {
    var arrayFill = function (size, content) {
        return Array.apply(null, Array(size)).map(String.prototype.valueOf, content);
    };

    var elementSize = parseInt(12 / elementsPerRow, 10);
    var normalClassName = 'col-' + screenSize + '-' + elementSize;
    var numberOfFittingElements = parseInt(totalNumberOfElements / elementsPerRow, 10) * elementsPerRow;
    var numberOfRemainingElements = totalNumberOfElements - numberOfFittingElements;
    var ret = arrayFill(numberOfFittingElements, normalClassName);
    var remainingSize = 12 - numberOfRemainingElements * elementSize;
    var remainingLeftSize = parseInt(remainingSize / 2, 10);
    return ret.concat(arrayFill(numberOfRemainingElements, normalClassName + ' col-' + screenSize + '-push-' + remainingLeftSize));
}

Wenn Sie 5 Elemente haben und auf einem md-Bildschirm jeweils 3 haben möchten, tun Sie dies:

colCalculator(5, 3, 'md')
>> ["col-md-4", "col-md-4", "col-md-4", "col-md-4 col-md-push-2", "col-md-4 col-md-push-2"]

Beachten Sie, dass das zweite Argument durch 12 teilbar sein muss.

Answer 4

Weil ich nie die Notwendigkeit habe, nur eine einzelne .col- innerhalb einer .row zu zentrieren, setze ich die folgende Klasse auf die umschließende .row meiner Ziel-Spalten.

.col-center > [class*="col-"] {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

Beispiel

            Foo

            Bar

Answer 5

Um genauer zu sein, enthält das Raster von Bootstrap 12 Spalten und um Inhalte zu zentrieren, nehmen wir an, dass der Inhalt eine Spalte einnimmt. Man muss dann zwei Spalten des Bootstrap-Rasters einnehmen und den Inhalt in der Mitte der beiden besetzten Spalten platzieren.

      ... hier kommt dein Inhalt / deine Daten hin ...

'col-xs-offset-5' gibt dem Rastersystem an, wo der Inhalt platziert werden soll.

'col-xs-2' gibt dem Rastersystem an, wie viele der übrig gebliebenen Spalten der Inhalt einnehmen soll.

'centered' wird eine definierte Klasse sein, die den Inhalt zentriert.

So sieht dieses Beispiel im Rastersystem von Bootstrap aus:

Spalten:

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12

.......offset....... .data. .......nicht verwendet........