Commandes déplacées après l'affichage de l'erreur

Question

C'est très embarrassant, mais j'ai du mal à l'afficher correctement. Le formulaire ci-dessous a plusieurs contrôles qui s'affichent correctement sans message de validation. Cependant, les contrôles sont décalés lorsque j'affiche le message d'erreur de la validation; ils sont partout. Après avoir lu le document bootstrap et fait un peu de recherche seulement, j'ai joué avec le clearfix et j'ai essayé la table d'affichage sans succès. Que puis-je faire pour empêcher le déplacement des commandes après l'affichage d'un message de validation?

Voici le code HTML utilisé.

<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

Après avoir affiché la question, j'ai réalisé que l'emballage d'un groupe de 3 contrôles à l'intérieur d'un col-xs-12 les empêchera de se déplacer.

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