在bootstrap中，如何在一列中有两行而在另一列中有单行？

Question

我希望实现下表，其中name列使用两行，而age和location使用一行。文本将以自己的行为中心：

这个引导程序是否合规？如果是这样，你会如何实现这样的表？

感谢。

Answer 1

是的，您可以在bootstrap中嵌套行和列。标记看起来像这样。

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <h1>Name</h1>
      <div class="row">
        <div class="col-sm-6">
          <p>John Smith</p>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-6">
          <p>Contractor</p>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <h1>Age</h1>
    </div>
    <div class="col-sm-4">
      <h1>Location</h1>
    </div>
  </div>
</div>