使用Bootstrap

Question

我目前正在研究一个在页面上显示多个容器（容器流体准确）的系统。配置这些容器，因此没有固定数量的容器。其中每个应该具有自动宽度和最大宽度。 我希望在同一高度上尽可能多的容器。这很好用，但右侧似乎有一个空白区域。左侧屏幕边框和左侧容器之间的边应等于右侧容器和右侧屏幕边框之间的空间。 这些容器包含多行和列。

我尝试将边距设置为自动，删除填充等。我还查找了关于此正确空间的其他一些线程。这些都没有帮助。

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

Answer 1

这是display: inline-block类

上的css container-fluid

Answer 2

将所有容器放入柔性盒中解决了问题：

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