Bootstrap 3.0“row”第一项未正确对齐

Question

使用Bootstrap 3.0和下面的代码是一个包含3个项目的片段，每个项目看起来效果很好，除了这一行中的第一个元素（加上其他元素）稍微偏移到“行”中的其他元素。我附上了问题的截图。我没有修改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”

之后插入一个break

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

希望这有帮助。