Bootstrap CSS noob - 每个“单元格”中带有嵌套网格的 5x5 网格的骨架代码答案

【问题标题】：Bootstrap CSS noob - skeleton code for 5x5 grid with nested grid in each "cell"Bootstrap CSS noob - 每个“单元格”中带有嵌套网格的 5x5 网格的骨架代码
【发布时间】：2017-11-05 03:31:02
【问题描述】：

我正在尝试创建一个如下所示的座位表应用程序：

我不确定是否可以使用所有 Bootstrap 完成，因为我读到 BS“容器”类不能嵌套。另外，如果我可以让整个图表自动拉伸到视口的全宽和全高，我会非常喜欢。我目前正在使用一个 5x5 html 表，每个 td 中都有一个 BS 网格。我目前在让“装订线”间距看起来正确时遇到问题（图中的红色条）。我也无法让所有元素都适合“行”（BS“行”类）。

<td style="white-space:nowrap">
        <div class="row">
            <div class="col-xs-3"><input id="39638" type="text" value=""></div><div class="col-xs-3"><label id="39638pc"><?php echo $part['39638'] ?></label></div>
            <div class="col-xs-3"><input id="39638bt" type="text" value=""></div><div class="col-xs-3"><label id="39638bc"><?php echo $part['39638'] ?></div></label></div>
        </div>
        <div class="row">
            <div class="col-xs-12"><label class="name-label">Opas</label></div>
        </div>
        <div class="row">
            <div class="col-xs-4"><button class="btn btn-primary" type="button" onclick="participate(39638)">Good</button></div>
            <div class="col-xs-4"><button class="btn btn-primary" type="button" onclick="behave(39638)">Bad</button></div>
            <div class="col-xs-4"><button class="btn btn-primary" type="button" onclick="comelate(39638)">Late</button></div>
        </div></td>

在 style.css 中：

    table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    /* padding: 8px; */
}

.row .col-xs-3 {
    display: inline-block; 
    float: none;
    padding-left: 5px;
    padding-right: 5px;
}

.row .col-xs-4 {
    display: inline-block; 
    float: none;
    padding: 0;
}

.row .col-xs-3 input, .row .col-xs-3 label {
    width: 100%;
    text-align: center;
    background-color: pink;
}

.row .col-xs-4 button {
    width: 95%;
    padding: 0;
    margin: 0;
}

td .row {
    margin: 0px;
}

.name-label {
    width: 100%;
    font: bold 14px calibri, sans-serif;
    text-align: center;
    margin: 0;
    padding: 0;
}

【问题讨论】：

好的，这就是你想要的，但问题是什么？？？？有麻烦不是问题
如何解决？
换句话说，这个网格的骨架代码是什么？或者...为什么我的代码不起作用？

标签： html css grid bootstrap-4

【解决方案1】：

所有 BS 都有可能。您不需要嵌套多个容器；你可以只嵌套行和列。

5x5 的网格有点棘手，因为 12 不能被 5 整除，但是here 有一个很好的解决方案。

这里是HTML code。

这里是CSS。

这是它的样子：

使其工作的关键是使用 BS“文本中心”类并在 css 中使用 display: table-row; 和 display: table-cell;。

现在，如果我只能让元素垂直居中...

【讨论】：