Question

我有一个很好的表格布局，但我想使用bootstrap row，col。

使其响应

请原谅我使用图片，但是用于说明目的。

这就是表格的样子：

这是一个带tr和td的标准html表;但是当尝试使用前两行的bootstrap和这段代码时：

<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>

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

1 个答案: