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

时间：2021-07-09 15:51:12

I am pretty new to using Bootstrap, and have hit a brick wall when trying to have a label, a textbox, a label and a textbox on the same line without a big gap between, and so that the State TextBox and Zip TextBox line up with the other TextBoxes and I can't seem to get my Submit button the line up properly either..Here is a screenshot

我很擅长使用Bootstrap,当尝试在同一行上有一个标签,一个文本框,一个标签和一个文本框而没有很大的间隙时,它已经碰壁了,所以State TextBox和Zip TextBox排队与其他TextBoxes,我似乎无法正确地使我的提交按钮排队..这是一个截图

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

The markup for all this is

所有这些的标记是

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

I have had success using form-inline, but I like the looks of form-horizontal.

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

Can someone tell me what I am doing wrong

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

EDIT

Here is a screen shot of when I use form-inline, its aligned to the left and I can't figure out how to indent it. 如何在形状水平方向上没有间隙的情况下对齐两个标签和两个文本框？

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

EDIT 2

This is how I am trying to get it to look.

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

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

2 个解决方案

#1

You need to put form-group classes around each of your "rows", like this:

你需要在每个“行”周围放置表单组类,如下所示:

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

Note: I switched the ASP.NET server controls to their HTML counterparts. The Bootstrap class usage is what to take note of, you can obviously apply those to the server controls via the CssClass attribute as you did in your code.

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

Also, I made each "row" in your markup add up to 12 to fill the 8-unit container you are putting them into. This eliminates the need to have line breaks in your markup, as when Bootstrap gets to the 12th unit it will go to the next row.

此外,我在您的标记中添加了每个“行”,最多为12个,以填充您要放入的8个单位的容器。这样就不需要在标记中设置换行符,因为当Bootstrap到达第12个单元时它将转到下一行。

UPDATE

To make the State and Zip entries behave more like you would like you will need to use the form-inline class on that "row" of information like this:

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

Note This creates a 4 unit area for the State label so it lines up with the other row's labels and then an 8-unit area for the remaining controls (State textbox, Zip label and Zip textbox). The padding-left style can be obviously be adjusted to a different value or unit (em or percentage) and pulled out into a CSS file instead of inline, but you get the idea.

注意这将为State标签创建一个4单位区域,使其与另一行的标签对齐,然后为其余控件(State文本框,Zip标签和Zip文本框)排列8个单位区域。显然可以将padding-left样式调整为不同的值或单位(em或百分比)并将其拉出到CSS文件而不是内联,但是您可以理解。

UPDATE 2

Based upon the screenshot of the layout you want, try this:

根据您想要的布局截图,试试这个:

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

Note This uses an offset to push the Zip label and consequently the Zip textbox to the right and makes the Zip label one unit wide.

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

To make the Send button align right, put it into a 12-unit row and pull the button to the right, like this:

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

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

Note The pull-right class is part of the button markup.

注意右拉类是按钮标记的一部分。

#2

So I think one of the issues is how your forms groups are nested.
Also you are using form-horizontal I think you mean to be using form-inline

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

Here is just some example code.

这里只是一些示例代码。

here is a quick mock up on codepen http://codepen.io/anon/pen/doowyQ

这是一个快速模拟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>

#1

You need to put form-group classes around each of your "rows", like this:

你需要在每个“行”周围放置表单组类,如下所示:

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

Note: I switched the ASP.NET server controls to their HTML counterparts. The Bootstrap class usage is what to take note of, you can obviously apply those to the server controls via the CssClass attribute as you did in your code.

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

Also, I made each "row" in your markup add up to 12 to fill the 8-unit container you are putting them into. This eliminates the need to have line breaks in your markup, as when Bootstrap gets to the 12th unit it will go to the next row.

此外,我在您的标记中添加了每个“行”,最多为12个,以填充您要放入的8个单位的容器。这样就不需要在标记中设置换行符,因为当Bootstrap到达第12个单元时它将转到下一行。

UPDATE

To make the State and Zip entries behave more like you would like you will need to use the form-inline class on that "row" of information like this:

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

Note This creates a 4 unit area for the State label so it lines up with the other row's labels and then an 8-unit area for the remaining controls (State textbox, Zip label and Zip textbox). The padding-left style can be obviously be adjusted to a different value or unit (em or percentage) and pulled out into a CSS file instead of inline, but you get the idea.

注意这将为State标签创建一个4单位区域,使其与另一行的标签对齐,然后为其余控件(State文本框,Zip标签和Zip文本框)排列8个单位区域。显然可以将padding-left样式调整为不同的值或单位(em或百分比)并将其拉出到CSS文件而不是内联,但是您可以理解。

UPDATE 2

Based upon the screenshot of the layout you want, try this:

根据您想要的布局截图,试试这个:

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

Note This uses an offset to push the Zip label and consequently the Zip textbox to the right and makes the Zip label one unit wide.

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

To make the Send button align right, put it into a 12-unit row and pull the button to the right, like this:

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

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

Note The pull-right class is part of the button markup.

注意右拉类是按钮标记的一部分。

#2

So I think one of the issues is how your forms groups are nested.
Also you are using form-horizontal I think you mean to be using form-inline

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

Here is just some example code.

这里只是一些示例代码。

here is a quick mock up on codepen http://codepen.io/anon/pen/doowyQ

这是一个快速模拟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>
标签：

相关文章