Bootstrap 3.0“行”第一项未正确对齐答案

【问题标题】：Bootstrap 3.0 "row" first item not aligned correctlyBootstrap 3.0“行”第一项未正确对齐
【发布时间】：2013-11-10 18:48:19
【问题描述】：

Using Bootstrap 3.0 和下面的代码是 a 的片段，其中包含 3 个项目，每个项目在 a 中看起来和工作良好，除了这一行中的第一个元素（加上其他元素）稍微高于其他元素在“行”内。我附上了这个问题的截图。我没有修改 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-->

【问题讨论】：

标签： asp.net css twitter-bootstrap

【解决方案1】：

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

【讨论】：

MasterPage 包含内容占位符的包装容器。一切都包装好了，但我会看一看。
刚注意到图片没有和原帖一起上传，我附上它给你我的结果。

【解决方案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-->

【讨论】：

【解决方案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>

希望这会有所帮助。

【讨论】：