twitter-bootstrap - 在BS 3中对齐标签和文本框

我正在尝试使用Bootstrap 3对齐标签和文本框

这不起作用，因为“开始日期”被包裹了。我也尝试过水平形式，但无济于事。

<div class="row">
    <div class="col-xs-3 input-group">
        <label class="active">Start Date</label>
        <input type="text" class="form-control">
    </div>
    <div class="col-xs-3">
        End Date
        <input type="text" class="form-control" placeholder=".col-xs-3">
    </div>
    <div class="col-xs-6">
        Project URL
        <input type="text" class="form-control" placeholder=".col-xs-6">
    </div>
</div>

谁能帮我吗？
谢谢，
凯拉斯

最佳答案

这是水平形式的解决方案

Fiddle

<form role="form" class="form-horizontal row">
  <div class="col-xs-3">
      <div class="form-group">
        <label for="exampleInput1" class="col-sm-6 control-label">Start Date</label>
        <div class="col-sm-6">
            <input type="text" class="form-control" id="exampleInput1" placeholder="Start Date">
        </div>
      </div>
  </div>
  <div class="col-xs-3">
      <div class="form-group">
        <label for="exampleInput2"  class="col-sm-6 control-label" >End Date</label>
        <div class="col-sm-6">
            <input type="text" class="form-control" id="exampleInput2" placeholder="End Date">
        </div>
      </div>
  </div>
  <div class="col-xs-6">
      <div class="form-group">
        <label for="exampleInput3"  class="col-sm-4 control-label">Project URL</label>
        <div class="col-sm-8">
            <input type="text" class="form-control" id="exampleInput3" placeholder="Project URL">
        </div>
      </div>
  </div>
</form>