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>

下面是现在的样子：

Answer 1

Bootstrap本身具有对齐类，您可以使用。

添加到课程属性：text-left

有关更多参考：https://getbootstrap.com/docs/4.0/utilities/text/

Answer 2

解决方案是嵌套引导网格，以便使用24列而不是12列。另外，多余的列消除了使用“ form-horizontal”类属性使标签更靠近文本框的需要。列越多，就越容易将标签和文本框放置在需要的位置。不需要额外的引导程序对齐类，也不需要切换到html5标签而不是asp标签。现在，随着页面大小的调整，标签和文本框会自动调整为自适应网页所期望的值，并且两个文本框的标签始终在页面的左边缘对齐，与页脚的左边缘匹配。

下面是解决方法：

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

下面是页面现在的外观，其中标签与页脚的左边缘对齐，即使页面响应不同的大小并自动调整标签和文本框也是如此：

使用Bootstrap时如何使asp.net标签与页脚对齐

2 个答案: