显示错误后控件移位

Question

这非常令人尴尬，但我很难让它正确显示。下面的表单有几个控件，无需验证消息即可正确显示。但是，当我显示验证的错误消息时，控件会被移动;他们到处都是。在阅读了引导程序文档并进行了相当多的搜索后，我使用了clearfix并尝试了显示表但没有成功。在显示验证消息后，如何防止控件移位？

以下是使用的HTML。

<div class="row">
                <div class="col-sm-4">
                    <div class="form-group">
                        <p class="sr-only">First Name:</p> <label aria-hidden="true" for="FirstName">First Name:</label>
                        @Html.TextBoxFor(mbox => mbox.FirstName, new { @class = "form-control", id = "FirstName" })
                        <span id="FirstNameError" class="error" aria-live="assertive" style="display:block; padding-left:120px;"></span>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="form-group">
                        <p class="sr-only">Middle Name:</p> <label for="middleName" aria-hidden="true">Middle Name:</label>
                        @Html.TextBoxFor(m => m.MiddleName, new { @class = "form-control", id = "middleName" })
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="form-group">
                        <p class="sr-only">Last Name:</p> <label for="LastName" aria-hidden="true">Last Name:</label>
                        @Html.TextBoxFor(m => m.LastName, new { id = "LastName", @class = "form-control" })
                        <span id="LastNameError" class="error" aria-live="assertive" style="display:block;padding-left:120px;"></span>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="form-group">
                        <p class="sr-only">Department:</p><label for="Department" aria-hidden="true">Department:</label>
                        @Html.TextBoxFor(m => m.Department, new { @class = "form-control", id = "Department" })
                        <span id="DepartmentError" class="error" aria-live="assertive" style="display:block;padding-left:120px;"></span>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="form-group">
                        <p class="sr-only">Office Number:</p><label for="OfficeNumber" aria-hidden="true">Office Number:</label>
                        @Html.TextBoxFor(mbox => mbox.OfficeNumber, new { id = "OfficeNumber", @class = "form-control" })
                        <span id="OfficeNumberError" class="error" aria-live="assertive" style="display:block;padding-left:120px;"></span>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="form-group">
                        <p class="sr-only">Extension:</p> <label aria-hidden="true" for="Extension">Extension:</label>
                        @Html.TextBoxFor(mbox => mbox.Extension, new { id = "Extension", @class = "form-control" })
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="form-group">
                        <p class="sr-only">User Name:</p> <label for="UserName" aria-hidden="true">User Name</label>
                        @Html.TextBoxFor(m => m.UserName, new { id = "UserName", @class = "form-control" })
                        <span id="UserNameError" class="error" aria-live="assertive" style="display:block;padding-left:120px;"></span>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="form-group">
                        <p class="sr-only">Password:</p><label for="Password" aria-hidden="true">Password:</label>
                        @Html.PasswordFor(m => m.Password, new { id = "Password", @class = "form-control" })
                        <span id="PasswordError" class="error" aria-live="assertive" style="display:block;padding-left:120px;"></span>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="form-group">
                        <p class="sr-only">Email Address:</p><label for="emailAddress" aria-hidden="true">Email Address:</label>
                        @Html.TextBoxFor(m => m.EmailAddress, new { id = "emailAddress", @class = "form-control" })
                        <span id="EmailAddressError" class="error" aria-live="assertive" style="display:block;padding-left:120px;"></span>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="form-group">
                        <p class="sr-only">Practitioner</p><label for="Practitioner" aria-hidden="true">Practitioner:</label>
                        @Html.DropDownListFor(mbox => mbox.PractitionerID, new SelectList(Model.availablePractitioners, "ID", "FullName"), new { id = "Practitioner", @class = "form-control" })
                        <span id="PractitionerError" class="error" aria-live="assertive" style="display:block;padding-left:120px;"></span>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="form-group">
                        <p class="sr-only">Active:</p><label for="Active" aria-hidden="true">Active:</label>
                        @Html.CheckBoxFor(m => m.Active, new { id = "Active", @class = "form-control", @checked = "checked" })
                    </div>
                </div>
            </div>

Answer 1

在发布问题之后，我意识到在col-xs-12中包含一组3个控件将阻止它们移动。

<div class="col-xs-12">
 <div class="col-sm-4">
                    <div class="form-group">
                        <p class="sr-only">First Name:</p> <label aria-hidden="true" for="FirstName">First Name:</label>
                        @Html.TextBoxFor(mbox => mbox.FirstName, new { @class = "form-control", id = "FirstName" })
                        <span id="FirstNameError" class="error" aria-live="assertive" style="display:block; padding-left:120px;"></span>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="form-group">
                        <p class="sr-only">Middle Name:</p> <label for="middleName" aria-hidden="true">Middle Name:</label>
                        @Html.TextBoxFor(m => m.MiddleName, new { @class = "form-control", id = "middleName" })
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="form-group">
                        <p class="sr-only">Last Name:</p> <label for="LastName" aria-hidden="true">Last Name:</label>
                        @Html.TextBoxFor(m => m.LastName, new { id = "LastName", @class = "form-control" })
                        <span id="LastNameError" class="error" aria-live="assertive" style="display:block;padding-left:120px;"></span>
                    </div>
                </div>
</div>