Question

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

这是我的代码：

＆＃13;

<!-- 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>

＆＃13;

我也做了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/

Answer 2

这是Lables在HTML中的默认行为。

对于内嵌标签，请查看 Horizontal-form, Bootstrap documentation

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<p style="font-family:monospace; color:red; text-align:center"> see in <b><i>Full Page</i></b> view, use other grid classes for smaller viewport.</p>
<div class="row">
  <div class="form-group form-horizontal col-md-6">
    <label class="col-md-2 control-label" for="De_:_">Label1 : </label>
    <div class="input-group col-md-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>
  <div class="form-group form-horizontal col-md-6">
    <label class="col-md-2 control-label" for="A_:_">Label2 : </label>
    <div class="input-group col-md-10">
      <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>

为什么我的标签与输入组 - Bootstrap不对齐

2 个答案: