引導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小白 - 在每個「細胞」

回答

相關問題