将Bootstrap行和列与其对应的字段

Question

我正在尝试使用bootstrap的响应列和行。 我创建了标签和字段，以便我可以了解它是如何工作的。我正在尝试将文本字段与其对应的标签对齐。我正在使用bootstraps文档来说明如何做到这一点，但无法弄明白这一点。

为什么我的字段会移到底部，如何将文本字段与相应的标签对齐。

参考： https://getbootstrap.com/docs/4.0/layout/grid/

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>

<div class="container">
  <div class="col-sm-12">
    <div class="row">
      <div class="col-sm-4">
        One
      </div>
      <div class="col-sm-4">
        two
      </div>
      <div class="col-sm-4">
        three
      </div>
    </div>
    <div class="row">
      <div class="col-sm-4">
        <input id="Text1" type="text" placeholder="one" />
      </div>
      <div class="col-sm-4">
        <input id="Text2" type="text" placeholder="two" />
      </div>
      <div class="col-sm-4">
        <input id="Text3" type="text" placeholder="three" />
      </div>
    </div>
  </div>
</div>

Answer 1

不是连续使用1,2和3，而是需要将两个1放在一列中。所以像这样：

<div class="col-md-4>
  <p>One</p>
  <input id="Text1" type="text" placeholder="one" />
</div>
<!--insert other columns here-->