asp.net - Bootstrap 3.0“行”第一项未正确对齐

Question

使用 Bootstrap 3.0 和下面的代码是 a 的一个片段，其中包含 3 个项目，每个在 a 中看起来都很好，除了这一行中的第一个元素（加上其他元素）稍微高于“ROW”中的其他元素。我附上了这个问题的截图。我没有修改 Bootstrap CSS 导致任何问题。

注意：其他行不包含我认为是问题的 ASP 控件，但事实并非如此。

<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
<h2><%: Title %>.</h2>
<hr />
<section id="CreateUserForm">
    <h4>Create User <i class="fa fa-user"></i></h4>
    <!--1st ROW-->
    <div class="row">
        <div class="form-group">
            <div class="col-md-4">
                <asp:DropDownList ToolTip="User Role" runat="server" ID="UserRole" CssClass="form-control"        ![enter image description here][2]AppendDataBoundItems="true" DataSourceID="AspNetRoles" DataTextField="Name" DataValueField="Name" Width="280px">
                    <asp:ListItem Text="-- Select User Role --" Value="" />
                </asp:DropDownList>
                <asp:RequiredFieldValidator runat="server" ControlToValidate="UserRole"
                    CssClass="text-danger" ErrorMessage="User Type is required." Display="Dynamic" />
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-4">
                <input type="text" runat="server" title="User Name" id="UserName" class="form-control" placeholder="User Name..." />
                <asp:RequiredFieldValidator runat="server" ControlToValidate="UserName"
                    CssClass="text-danger" ErrorMessage="User Name is required." Display="Dynamic" />
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-4">
                <input type="text" runat="server" title="First Name" id="FirstName" class="form-control" placeholder="First Name..." />
                <asp:RequiredFieldValidator runat="server" ControlToValidate="FirstName"
                    CssClass="text-danger" ErrorMessage="First Name is required." Display="Dynamic" />
            </div>
        </div>
    </div>
    <!--END 1st ROW-->
    <!--2nd Row-->

Answer 1

您需要将所有内容包装在.container.

Answer 2

修复是删除控件周围的“form-group”并在每个“ROW”之后插入一个中断

<!--1st ROW-->
    <div class="row">
            <div class="col-md-4">
                <asp:DropDownList ToolTip="User Role" runat="server" ID="UserRole" CssClass="form-control" AppendDataBoundItems="true" DataSourceID="AspNetRoles" DataTextField="Name" DataValueField="Name" Width="280px">
                    <asp:ListItem Text="-- Select User Role --" Value="" />
                </asp:DropDownList>
                <asp:RequiredFieldValidator runat="server" ControlToValidate="UserRole"
                    CssClass="text-danger" ErrorMessage="User Type is required." Display="Dynamic" />
            </div>
            <div class="col-md-4">
                <input type="text" runat="server" title="User Name" id="UserName" class="form-control" placeholder="User Name..." />
                <asp:RequiredFieldValidator runat="server" ControlToValidate="UserName"
                    CssClass="text-danger" ErrorMessage="User Name is required." Display="Dynamic" />
            </div>

            <div class="col-md-4">
                <input type="text" runat="server" title="First Name" id="FirstName" class="form-control" placeholder="First Name..." />
                <asp:RequiredFieldValidator runat="server" ControlToValidate="FirstName"
                    CssClass="text-danger" ErrorMessage="First Name is required." Display="Dynamic" />
            </div>
    </div>
    <br />
    <!--END 1st ROW-->

Answer 3

我在创建表单时遇到了同样的问题，我发现答案是在表单组之前添加列类。这解决了对齐问题，无需在行之间添加分隔符（form-group 为您处理间距）。

<!--1st ROW-->
<div class="row">
    <div class="col-md-4">
        <div class="form-group">
            <asp:DropDownList ToolTip="User Role" runat="server" ID="UserRole" CssClass="form-control"        ![enter image description here][2]AppendDataBoundItems="true" DataSourceID="AspNetRoles" DataTextField="Name" DataValueField="Name" Width="280px">
                <asp:ListItem Text="-- Select User Role --" Value="" />
            </asp:DropDownList>
            <asp:RequiredFieldValidator runat="server" ControlToValidate="UserRole"
                CssClass="text-danger" ErrorMessage="User Type is required." Display="Dynamic" />
        </div>
    </div>

希望这可以帮助。