C# 如何对齐两个标签和两个文本框，而不在水平表单中留有间隙？_C#_Asp.net_Twitter Bootstrap_Webforms

C# 如何对齐两个标签和两个文本框，而不在水平表单中留有间隙？

c# asp.net twitter-bootstrap

C# 如何对齐两个标签和两个文本框，而不在水平表单中留有间隙？,c#,asp.net,twitter-bootstrap,webforms,C#,Asp.net,Twitter Bootstrap,Webforms,我对使用Bootstrap非常陌生，当我试图让标签、文本框、标签和文本框在同一行上没有很大的间距时，我遇到了麻烦，因此State textbox和Zip textbox与其他文本框对齐，我似乎也无法正确地将提交按钮对齐。这是一个屏幕截图所有这些的标记都是 <body> <form id="form1" runat="server"> <div class="form-horizontal"> <h4>Please ad

我对使用Bootstrap非常陌生，当我试图让标签、文本框、标签和文本框在同一行上没有很大的间距时，我遇到了麻烦，因此State textbox和Zip 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>


请添加您的信息

我成功地使用了表单内联，但我喜欢表单水平的外观

有人能告诉我我做错了什么吗

编辑

这是我使用表单内联时的屏幕截图，它向左对齐，我不知道如何缩进它。

编辑2

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

因此我认为其中一个问题是表单组的嵌套方式。
另外，您使用的是表单水平，我想您的意思是使用表单内联

这里只是一些示例代码

这里是一个关于codepen的快速模型

添加您的信息
电子邮件地址
暗语
名称
电子邮件
发出邀请

因此我认为其中一个问题是表单组的嵌套方式。
另外，您使用的是表单水平，我想您的意思是使用表单内联

这里只是一些示例代码

这里是一个关于codepen的快速模型

添加您的信息
电子邮件地址
暗语
名称
电子邮件
发出邀请

您需要在每个“行”周围放置

表单组

类，如下所示：

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

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

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

注意：这将为状态标签创建一个4个单位的区域，使其与另一行的标签对齐，然后为其余控件（状态文本框、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-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>

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

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


邮寄

注意，

pull right

类是按钮标记的一部分。

您需要将

表单组

类放在每个“行”周围，如下所示：

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

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

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

padding left