Zentrieren dynamischer Container auf der Seite mit Bootstrap

Question

Ich arbeite derzeit an einem System, das mehrere Container (Container-Flüssigkeit, um genau zu sein) auf einer Seite zeigt. Diese Container sind so konfiguriert, dass keine festgelegte Anzahl von ihnen vorhanden ist. Jeder von ihnen sollte eine automatische Breite und eine maximale Breite haben. Ich möchte, dass möglichst viele Container auf gleicher Höhe stehen. Das funktioniert gut, aber auf der rechten Seite scheint ein weißer Bereich zu sein. Die Seite zwischen dem linken Bildschirmrand und dem linken Container sollte gleich dem Abstand zwischen dem rechten Container und dem rechten Bildschirmrand sein. Diese Container enthalten mehrere Zeilen und Spalten.

Ich habe versucht, den Rand auf Auto, Entfernen von Polsterungen etc. Ich habe auch einige andere Threads über diesen richtigen Platz nachgeschlagen. Nichts davon war hilfreich.

CSS:

.table { 
    width: 100%; 
    margin-top: 0; 
    clear: both; 
    margin-bottom: 6px!important; 
    max-width: none!important; 
} 
.container-fluid { 
    max-width: 900px; 
    width: 100%; 
    position: relative; 
    display: inline-block; 
    clear: both; 
} 
td { 
    display: table-cell; 
    padding: 10px; 
} 
tr { 
    display: table-row; 
    vertical-align: inherit; 
    border-color: inherit; 
} 
.pagination { 
    display: inline-block; 
    margin-top: 0; 
    margin-bottom: 0; 
} 
.table-container { 
    clear: both; 
    overflow: auto; 
    overflow-y: hidden; 
} 

Bild:

Wie Sie sehen können, der richtige Platz ist viel größer.

Site

Answer 1

Es ist die CSS display: inline-block auf container-fluid Klasse

Answer 2

alle Behälter in einer Flex-Box Putting das Problem behoben:

.container-pack { 
    display: inline-flex; 
    flex-wrap: wrap; 
    justify-content: space-around; 
    align-content: flex-start; 
    padding: 0; 
    margin: 0; 
    width: 100%; 
}