如何在表单水平中对齐两个标签和两个文本框而没有间隙？答案

【问题标题】：how to align two labels and two textboxes without a gap in form-horizontal?如何在表单水平中对齐两个标签和两个文本框而没有间隙？
【发布时间】：2023-03-25 17:33:01
【问题描述】：

我对使用 Bootstrap 很陌生，并且在尝试在同一行上放置一个标签、一个文本框、一个标签和一个文本框时遇到了障碍，并且在状态文本框和 Zip 之间没有很大的差距文本框与其他文本框对齐，我似乎也无法让我的提交按钮正确对齐。这是一个屏幕截图

所有这些的标记是

<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

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

【问题讨论】：

标签： c# asp.net twitter-bootstrap webforms

【解决方案1】：

您需要在每个“行”周围放置 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 属性将这些应用到服务器控件，就像您在代码中所做的那样。

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

更新

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

<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 个单位的区域，使其与另一行的标签对齐，然后为其余控件（State 文本框、Zip 标签和 Zip 文本框）创建一个 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 类是按钮标记的一部分。

【讨论】：

谢谢，现在看起来好多了，唯一困扰我的是状态文本框和 Zip 标签之间的差距。有什么办法可以缩短两者的差距吗？我已经使用 form-inline 而不是 form-horizontal 完成了它，但是它与窗口的左侧对齐，我不知道如何在窗口左侧与第一个标签之间添加空格，如果我是，我深表歉意没有正确解释
当我使用 form-inline 时，我将编辑并显示一个屏幕截图，使用 form-inline 我无法弄清楚如何从浏览器窗口的左侧移动它跨度>
@Chris - 不知道你的意思是彼此相邻，你能用你希望状态和 ZIP 标签/文本框如何相互关联的图来更新你的问题吗和他们自己？
@Chris - 没问题，祝你好运。我强烈推荐一个像 Bootply 这样的网站，它可以让你粘贴你的标记并使用它，这是我在那个网站上验证的你的标记的一部分 (bootply.com/4k7mNGpBJ4)。真正很酷的部分是，如果您愿意，您可以与其他人分享此内容，或在您自己的帐户中将其保密。此外，您无需创建帐户即可使用该网站或保存所做更改的版本。
一定要去看看那个网站。当我有其他问题时，它会很有帮助，会让提供帮助的人更轻松。

【解决方案2】：

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

【讨论】：