将Bootstrap行和列与其对应的字段对齐(Align Bootstrap rows and columns with its corresponding fields)

 我正在尝试使用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>
 
 
 
 
 
  

I'm trying to work with bootstrap's responsive column and rows. I created labels and fields so that I can learn how it works. I'm trying to align the text-fields with its corresponding labels. I was using bootstraps documentation on how to do it, but couldn't figure out the trick. 
 
Why are my fields moving to the bottom and how can I align the text-fields to the corresponding labels.
 
Ref: 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>
 
 
 
 
 

原文：https://stackoverflow.com/questions/48939427