引导CSS小白 - 在每个“细胞”

-1

我试图创建一个座位表的应用程序，看起来像这样与网格嵌套5x5的网格骨架代码：引导CSS小白 - 在每个“细胞”

我不知道这是否能用所有的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; 
}

来源

2017-06-04 user3925803

好吧，这是你想要的，但问题是什么????遇到麻烦不是问题 –

如何解决麻烦？ – user3925803

换句话说，这个网格的骨架代码是什么？或...为什么我的代码不工作？ – user3925803

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

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

这里是HTML code。

这是CSS。

这里是什么样子：

的关键在于使其工作进行了使用BS“文本中心”类和使用display: table-row;并在CSS display: table-cell;。

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

来源

2017-06-05 11:24:52 user3925803

引导CSS小白 - 在每个“细胞”

回答

相关问题