使用Bootstrap在頁面上居中動態容器

我目前正在研究一個系統，該頁面上顯示多個容器（準確地說是容器流體）。這些容器被配置成沒有設置它們的數量。其中每個應該具有自動寬度和最大寬度。我想在那裏儘可能多的容器在同一高度。這工作正常，但似乎在右側有一個空白區域。左邊的屏幕邊框和左邊的容器之間的邊應該等於右邊的容器和右邊的屏幕邊框之間的空間。這些容器包含多行和列。使用Bootstrap在頁面上居中動態容器

我試着將邊距設置爲自動，刪除填充等。我也查了一些關於這個正確的空間的其他線程。這些都沒有幫助。

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

圖片：

正如你所看到的，正確的空間要大得多。

Site

來源

2016-08-07 Robin De Baets

這是CSS display: inline-block您container-fluid類

來源

2016-08-07 22:06:37 Dominofoe

當設置在顯示器內聯的最大寬度拒絕工作，寬度變爲自動。 –

在我的計算機上，行的寬度保持在900px或更小。 – Dominofoe

http://i.robindebaets.be/00-19-46.png將顯示內容設置爲inline並將容器流體的最大寬度設置爲900px時 –

把所有的容器中，彎曲箱解決了這一問題：

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

來源

2016-08-08 10:29:00

使用Bootstrap在頁面上居中動態容器

回答

相關問題