Question

我正在尝试创建一个座位表应用程序，看起来像这样：

我不确定是否可以使用所有Bootstrap，因为我读到BS“容器”类不能嵌套。另外，如果我能让整个图表自动拉伸到视口的整个宽度和高度，我真的很喜欢它。我目前正在使用每个td中带有BS网格的5x5 html表。我现在遇到的问题是让“阴沟”间距看起来正确（图中的红条）。我也无法让所有元素都适合“行”（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;
}

Answer 1

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

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

这是HTML code。

这是CSS。

以下是它的样子：

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

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

Bootstrap CSS noob - 5x5网格的骨架代码，每个“单元格”都有嵌套网格

1 个答案: