表格使用Div + bootstrap

Question

是否可以使用Bootstrap在Div中创建一个具有头部结构的表格。我正在尝试创建如下结构：

我能够以表格形式实现这一目标，但是想在＆＃34; Div＆＃34;中创建相同的内容。在引导程序中的方式。 我尝试了以下代码，但数据没有水平显示：

<form class='container' style='width:100%'><h2>Marks Tracker</h2>

<div class='row'>   
 <div class = 'col-xs-3'> <label class = 'control-label'>Select Session Number:</label></div>   
 <div class = 'col-xs-3'>{{sessionNumberCtrl}}</div>   
<div class = 'col-xs-3'><label class = 'control-label'>Session Between<em style='color:red'>*</em>: </label></div>   
 <div class = 'col-xs-3'>{{Team1Ctrl}} <label  class= 'control-label'> vs </label> {{Team2Ctrl}} </div>   
</div>   
 <div class='clearfix'></div>   

<div class='row'>   
<div class = 'col-xs-3'><label class = 'control-label'>Student Name:</label></div>   
<div class = 'col-xs-3'><label class = 'control-label'>Team:</label></div>   
<div class = 'col-xs-3'><label class = 'control-label'>Maths </label></div>   
<div class = 'col-xs-3'><label class = 'control-label'>Physics </label></div>   
<div class = 'col-xs-3'><label class = 'control-label'>Chemistry </label></div>   
<div class = 'col-xs-3'><label class = 'control-label'>option1 / option2</label></div>   
<div class = 'col-xs-3'><label class = 'control-label'>Total</label></div>   
</div>   
<div class='clearfix'></div>   
 </form> 

如何创建？ 感谢

Answer 1

col-xs-3表示只有在超小型设备（宽度<= 768 px）上，列才会占用容器的3/12。您可以尝试使用col-sm-3（宽度> 768px）并查看它是否有帮助。