html - 为什么我的标签与输入组不一致 - Bootstrap

Question

我不知道为什么，但我无法将我的标签(此处为 Label1 和 Label2)与每个标签后面的输入组对齐。

这是我的代码:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<div class="row">
  <div class="form-group col-md-6">
    <label for="De_:_">Label1 : </label>
    <div class="input-group">
      <span class="input-group-addon">Date</span>
      <input class="form-control" id="DateBeginModif" name="DateBeginModif" placeholder="Date" type="text" value="1/1/0001 12:00:00 AM">
      <span class="input-group-addon" style="border-left: 0; border-right: 0;">ou Lancement</span>
      <input class="form-control" id="RunBeginModif" name="RunBeginModif" placeholder="Run" type="text" value="">
    </div>
  </div>
  <div class="form-group col-md-6">
    <label for="A_:_">Label2 : </label>
    <div class="input-group">
      <span class="input-group-addon">Date</span>
      <input class="form-control" id="DateEndModif" name="DateEndModif" placeholder="Date" type="text" value="1/1/0001 12:00:00 AM">
      <span class="input-group-addon" style="border-left: 0; border-right: 0;">ou Lancement</span>
      <input class="form-control" id="RunEndModif" name="RunEndModif" placeholder="Run" type="text" value="">
    </div>
  </div>
</div>

我做了一个fiddle也是。

我从这个 http://getbootstrap.com/css/#forms-inline 得到启发但我一定错过了什么:/

Answer 1

首先你错过了添加 <form>类元素 form-inline (或者您没有将其包含在您的问题中)。

将您的内容放在 .col-md-6 中div - .input-group宽度更高，这就是它在下一行的原因。

您有两个选择:您可以使用更小的宽度输入，或者您可以使用 col-*并在网格中构建表单。

这是第二个选项的示例:

  <div class="form-group col-md-6">
    <label for="De_:_" class="col-xs-2">Label1 : </label>
    <div class="input-group col-xs-10">
      <span class="input-group-addon">Date</span>
      <input class="form-control" id="DateBeginModif" name="DateBeginModif" placeholder="Date" type="text" value="1/1/0001 12:00:00 AM">
      <span class="input-group-addon" style="border-left: 0; border-right: 0;">ou Lancement</span>
      <input class="form-control" id="RunBeginModif" name="RunBeginModif" placeholder="Run" type="text" value="">
    </div>
  </div>

演示:http://jsfiddle.net/axa0rz44/2/