如何对齐两个标签和两个文本框而没有水平间隙？

Question

我对使用 Bootstrap 还很陌生，在尝试将标签、文本框、标签和文本框放在同一行上且之间没有很大间隙时遇到了麻烦，等等State TextBox 和 Zip TextBox 与其他 TextBox 对齐，我似乎也无法正确对齐我的提交按钮。这是屏幕截图

所有这些的标记是

<body>
<form id="form1" runat="server">
    <div class="form-horizontal">

        <h4>Please add your information</h4>
        <hr />
        <asp:ValidationSummary runat="server" CssClass="text-danger" />
        <div class="form-group form-horizontal col-md-8">
            <asp:Label ID="lblName" runat="server" AssociatedControlID="txtName" Text="Name" CssClass="col-md-2 control-label"></asp:Label>
            <div class="col-md-6">
                <asp:TextBox ID="txtName" runat="server" CssClass="form-control"></asp:TextBox>
            </div>
            <br />
            <br />
            <asp:Label ID="lblLastName" runat="server" AssociatedControlID="txtLastName" Text="Last Name" CssClass="col-md-2 control-label"></asp:Label>
            <div class="col-md-6">
                <asp:TextBox ID="txtLastName" runat="server" CssClass="form-control"></asp:TextBox>
            </div>
            <br />
            <br />
            <asp:Label runat="server" AssociatedControlID="Address1" CssClass="col-md-2 control-label" Text="Address1"></asp:Label>
            <div class="col-md-6">
                <asp:TextBox runat="server" ID="Address1" CssClass="form-control" />
            </div>
            <br />
            <br />
            <asp:Label runat="server" AssociatedControlID="Address2" CssClass="col-md-2 control-label" Text="Address2"></asp:Label>
            <div class="col-md-6">
                <asp:TextBox runat="server" ID="Address2" CssClass="form-control" />
            </div>
            <br />
            <br />
            <asp:Label ID="lblCity" runat="server" AssociatedControlID="txtCity" Text="City" CssClass="col-md-2 control-label" Font-Bold="true"></asp:Label>
            <div class="col-md-6">
                <asp:TextBox runat="server" ID="txtCity" CssClass="form-control" />
            </div>
            <br />
            <br />
            <div class="form-group">
                <asp:Label ID="lblState" runat="server" AssociatedControlID="txtState" Text="State" CssClass="col-md-2 control-label" Font-Bold="true"></asp:Label>
                <div class="col-md-2">
                    <asp:TextBox runat="server" ID="txtState" CssClass="form-control" />
                </div>
                <asp:Label ID="lblZip" runat="server" AssociatedControlID="txtZip" Text="Zip" CssClass="col-md-2 control-label" Font-Bold="true"></asp:Label>
                <div class="col-md-2">
                    <asp:TextBox runat="server" ID="txtZip" CssClass="form-control" />
                </div>
            </div>
            <asp:Label ID="lblCountry" runat="server" AssociatedControlID="ddCountry" Text="Country" CssClass="col-md-2 control-label" Font-Bold="true"></asp:Label>
            <div class="col-md-6">
                <asp:DropDownList ID="ddCountry" runat="server" CssClass="form-control"></asp:DropDownList>
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-offset-4 col-md-2">
                <asp:Button ID="btnSubmit" runat="server" Text="Send" CssClass="btn btn-primary" />
            </div>
        </div>
    </div>
</form>

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

谁能告诉我我做错了什么

编辑

这是我使用 form-inline 时的屏幕截图，它向左对齐，但我不知道如何缩进。

编辑 2

这就是我试图让它看起来的样子。

Answer 1

所以我认为问题之一是您的表单组是如何嵌套的。
你也在使用 form-horizontal 我认为你的意思是使用 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

您需要在每个 "rows" 周围放置 form-group classes，如下所示：

<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 class 用法是需要注意的地方，您显然可以像在代码中那样通过 CssClass 属性将它们应用于服务器控件。

此外，我将您标记中的每个 "row" 加起来为 12，以填充您要放入的 8 单位容器。这消除了在标记中换行的需要，因为当 Bootstrap 到达第 12 个单元时它将转到下一行。

更新

要使 State 和 Zip 条目的行为更像您希望的那样，您需要在 "row" 信息上使用 form-inline class，如下所示：

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

注意这会为州标签创建一个 4 个单位的区域，以便它与另一行的标签对齐，然后为其余控件创建一个 8 个单位的区域（州文本框，邮编标签和邮编文本框）。 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 class 是按钮标记的一部分。

如何对齐两个标签和两个文本框而没有水平间隙？

how to align two labels and two textboxes without a gap in form-horizontal?

c#

asp.net

webforms

twitter-bootstrap