使引导网格看起来像一张表

Question

我有一个很好的表格布局，但我想使用引导行，列。

请原谅我使用图像，但是为了说明目的。

这是表的样子：

Table

这是一个与TR和TD标准的HTML表格;但是，当尝试引导与第2行，该代码使用：

<div class="row like-table" style="background-color:#f9f9f9;"> 
    <div class="col-md-2"> 
     <label for="txt_first_name">First Name</label> 
    </div> 
    <div class="col-md-2"> 
     <input type="text" name="txt_first_name" id="txt_first_name" value="<?php echo $var_FirstName;?>"> 
    </div> 
    <div class="col-md-2"> 
     <label for="txt_last_name">Last Name</label> 
    </div> 
    <div class="col-md-2"> 
     <input type="text" name="txt_last_name" id="txt_last_name" value="<?php echo $var_LastName;?>"> 
    </div> 
    <div class="col-md-2"> 
     <label for="gender">Gender</label> 
    </div> 
    <div class="col-md-2"> 
     <select name="gender" id="gender"> 
      <option value="" <?php if($var_Gender==''){ echo 'selected'; }?>>Please Select</option> 
      <option value="Male" <?php if($var_Gender=='Male'){ echo 'selected'; }?>>Male</option> 
      <option value="Female" <?php if($var_Gender=='Female'){ echo 'selected'; }?>>Female</option> 
      <option value="Other" <?php if($var_Gender=='Other'){ echo 'selected'; }?>>Other</option> 
     </select> 
    </div> 
</div> 

我没有得到一个整洁的表，但这样的：

table bootstrap

好像COL-MD-1太窄，col-md-2要宽到第一列，标签没有正确对齐。谁能帮忙？

谢谢

Answer 1

看来你想要3列标签和输入。 你可以做的是这样的：

<div class="row like-table"> 
<div class="col-md-4"> 
<div class="col-md-6"><label for="txt_first_name">First Name</label></div> 
<div class="col-md-6"><input type="text" value="FirstName"> 
</div> 
<div class="col-md-6"><label for="txt_birth_date">Birth Date</label></div> 
<div class="col-md-6"><input type="text" value=""> 
</div> 
</div> 
    <div class="col-md-4"> 
     <div class="col-md-6"><label for="txt_last_name">Last Name</label> 
</div> 
     <div class="col-md-6"><input type="text" value=""> 
     </div> 
     <div class="col-md-6"><label for="txt_birth_date">Hire Date</label> 
</div> 
     <div class="col-md-6"><input type="text" value=""> 
     </div> 
     </div> 
    <div class="col-md-4"> 
    <div class="col-md-6"><label for="gender">Gender</label></div> 
    <div class="col-md-6"><select> 
     <option value="">Please Select</option> 
     <option value="Male" >Male</option> 
     <option value="Female">Female</option> 
     <option value="Other">Other</option> 
     </select> 
     </div> 
    <div class="col-md-6"><label for="txt_termination_date">Termination Date</label></div> 
    <div class="col-md-6"><input type="text" value=""> 
    </div> 
    </div> 


    </div>