html - 使用引导程序时如何将 asp.net 标签左对齐到页脚

Question

下面的带有引导程序的母版页下的 asp.net WebForm 代码适用于只有 2 个带标签的输入框的小页面。我想要做的是让标签与页脚对齐。现在的方式是，标签会自动缩进，因此它们不会与页脚的左边缘对齐。在第二个标签和输入框中，我尝试将填充设置为 0px，但效果不佳。

我还尝试通过猜测将内容向左推多少来为 div 添加右边距，但这也是不一致的。然后我尝试了引导语句“pull-left”，它确实使它们一直向左移动，但是当我这样做时，我的两个单词标签最终会彼此重叠。有没有办法让标签左对齐，以便它们匹配页脚的左边缘并保留标签的格式，然后是相关的输入框都在一行上？提前致谢。

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="JSFormValidate01.aspx.cs" Inherits="WebFormJSValidateForm.WebFormJSValidateForm01" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <br />
    <div class="form-horizontal row">
        <div class="form-group">
            <asp:Label runat="server" AssociatedControlID="FirstNameTextBox" CssClass="col-md-2 control-label" Text="First Name:"></asp:Label>
            <div class="col-md-5">
                <asp:TextBox ID="FirstNameTextBox" runat="server" ></asp:TextBox>
            </div>
            <div class="col-md-5">
                <asp:Label ID="FirstNameErrorLabel" runat="server" ForeColor="Red"></asp:Label>
            </div>
        </div>
    </div>

    <div class="form-horizontal row">
        <div class="form-group">

            <asp:Label runat="server" AssociatedControlID="LastNameTextBox" CssClass="col-md-2 control-label" style="padding-right:0px" Text="Last Name:"></asp:Label>
            <div class="col-md-5">
                <asp:TextBox ID="LastNameTextBox" runat="server" style="padding-left:0px"></asp:TextBox>
            </div>
            <div class="col-md-5">
                <asp:Label ID="LastNameErrorLabel" runat="server" ForeColor="Red"></asp:Label>
            </div>
        </div>
    </div>

</asp:Content>

下面是它现在的样子：

标签： htmlasp.nettwitter-bootstrap-3webforms

Answer 1

The solution is to nest the bootstrap grid so there are 24 columns to work with rather than 12. Also, the extra columns remove the need to use the "form-horizontal" class attribute to get the label closer to the textbox. With more columns it is easier to position the labels and textboxes where they are needed. No extra bootstrap alignment classes were needed or switching to html5 tags rather than asp tags. The labels and textboxes now automatically adjust as expected for a responsive web page as the page is sized and the labels for both textboxes are always lined up on the left edge of the page matching the footer left edge.

Below is the solution:

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="JSFormValidate01.aspx.cs" Inherits="WebFormJSValidateForm.WebFormJSValidateForm01" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <br />
    <div class="row">
        <div class="col-sm-8">
            <div class="row">
                <div class="form-group col-sm-8 col-md-6">
                     <asp:Label runat="server" AssociatedControlID="FirstNameTextBox" CssClass="control-label" Text="First Name:"/>
                       <asp:TextBox ID="FirstNameTextBox" runat="server" ></asp:TextBox>
                    <asp:Label ID="FirstNameErrorLabel" runat="server" ForeColor="Red" CssClass="control-label"/>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-8">
            <div class="row">

                <div class="form-group col-sm-8 col-md-6">
                     <asp:Label runat="server" AssociatedControlID="LastNameTextBox" CssClass="control-label" Text="Last Name:"/>
                       <asp:TextBox ID="LastNameTextBox" runat="server" ></asp:TextBox>
                    <asp:Label ID="LastNameErrorLabel" runat="server" ForeColor="Red" CssClass="control-label"/>
                </div>
            </div>
        </div>
    </div>

</asp:Content>

Below is how the page now looks with the labels lined up to the footer left edge even as the page responds to different sizes and auto adjustments to labels and text boxes: