如何在形状水平方向上没有间隙的情况下对齐两个标签和两个文本框？

Question

我很擅长使用Bootstrap，当尝试在同一行上有一个标签，一个文本框，一个标签和一个文本框而没有很大的差距时，它已经碰壁了，所以State TextBox和Zip TextBox与其他TextBox对齐，我似乎无法将我的提交按钮正确排列。这是截图

所有这些的标记是

List<Lado> lados = new LinkedList<>();
:
lados.add(new Artista (..));
:
return lados;

我使用form-inline取得了成功，但我喜欢form-horizo​​ntal的外观。

有人可以告诉我我做错了吗

修改

这是一个屏幕截图，当我使用form-inline时，它与左边对齐，我无法弄清楚如何缩进它。

编辑2

这就是我试图让它看起来的方式。

Answer 1

所以我认为其中一个问题是你的表单组是如何嵌套的 你也使用form-horizo​​ntal我认为你的意思是使用form-inline

以下是一些示例代码。

这是对codepen http://codepen.io/anon/pen/doowyQ

的快速模拟

<h4>add your information</h4>
<form>
  <div class="form-group col-md-8">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    <div class="form-inline">
      <label for="exampleInputName2">Name</label>
      <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
      <label for="exampleInputEmail2">Email</label>
      <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
    </div>
    <button type="submit" class="btn btn-default">Send invitation</button>
</form>

Answer 2

您需要在每个＆＃34;行＆＃34;周围添加form-group个类，如下所示：

<div class="form-horizontal">
  <h4>Please add your information</h4>
  <hr />
  <div class="form-horizontal col-md-8">
    <div class="form-group">
      <label for="Name" class="col-md-4 control-label">Name</label>
      <div class="col-md-8">
        <input id="Name" type="text" class="form-control" />
      </div>
    </div>
    <div class="form-group">
      <label for="LastName" class="col-md-4 control-label">Last Name</label>
      <div class="col-md-8">
        <input id="LastName" class="form-control" />
      </div>
    </div>
    <div class="form-group">
      <label for="State" class="col-md-4 control-label">State</label>
      <div class="col-md-2">
        <input id="State" class="form-control" />
      </div>
      <label for="Zip" class="col-md-4 control-label">Zip</label>
      <div class="col-md-2">
        <input id="Zip" class="form-control" />
      </div>
    </div>
    <div class="form-group">
      <label class="col-md-4 control-label">Country</label>
        <div class="col-md-8">
          <select class="form-control"></select>
        </div>
    </div>
    <div class="form-group">
      <div class="col-md-offset-4 col-md-8">
        <button type="submit" class="btn btn-primary">Send</button>
      </div>
    </div>
  </div>
</div>

注意：我将ASP.NET服务器控件切换为HTML对应项。 Bootstrap类的用法是需要注意的，显然您可以通过CssClass属性将其应用于服务器控件，就像在代码中一样。

另外，我做了每个＆＃34; row＆＃34;在您的标记中添加最多12个以填充您要放入的8个单位的容器。这样就无需在标记中设置换行符，因为当Bootstrap到达第12个单元时，它将转到下一行。

<强>更新

要使State和Zip条目的行为更符合您的需要，您需要使用form-inline类，即＃34;行＆＃34;这样的信息：

<div class="form-group">
  <div class="form-inline">
    <label for="State" class="col-md-4 control-label">State</label>
    <div class="col-md-8">
      <input id="State" class="form-control" />
      <label for="Zip" class="control-label" 
             style="padding-left: 20px;">Zip</label>
      <input id="Zip" class="form-control" />
    </div>
  </div>
</div>

注意这为State标签创建了一个4单位区域，因此它与其他行的标签对齐，然后是其余控件的8个单位区域（State textbox，Zip标签和Zip文本框）。显然可以将padding-left样式调整为不同的值或单位（em或百分比）并将其拉出到CSS文件中而不是内联，但是您可以理解。

更新2

根据您想要的布局截图，试试这个：

<div class="form-group">
  <label for="State" class="col-md-4 control-label">State</label>
  <div class="col-md-2">
    <input id="State" class="form-control" />
  </div>
  <label for="Zip" class="col-md-offset-3 col-md-1 control-label">Zip</label>
  <div class="col-md-2">
    <input id="Zip" class="form-control" />
  </div>
</div>

注意这会使用偏移量来拉动Zip标签，从而将Zip文本框推向右侧，并使Zip标签为一个单位宽。

要使“发送”按钮对齐，请将其放入12个单位的行，然后将按钮向右拉，如下所示：

<div class="form-group">
  <div class="col-md-12">
    <button type="submit" class="btn btn-primary pull-right">Send</button>
  </div>
</div>

注意 pull-right类是按钮标记的一部分。