使用 Div + bootstrap 的表格结构

Question

是否可以使用 Bootstrap 在 Div 中创建具有标题的表结构。我正在尝试创建如下结构：

我能够以表格格式实现这一点，但想在引导程序中以“Div”方式创建相同的。 我试过下面的代码，但数据没有水平显示：

<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 表示仅在超小型设备（宽度 col-sm-3 (width > 768px) 看看是否有帮助。