Conception de bootstrap adaptatif provoquant le déplacement des divs avec l'ajout de help-block

Question

Je suis un noob en termes de CSS. J'ai utilisé le plugin Bootstrap Validator de here avec Bootstrap Rtl sur mon site Web de formulaires Web asp.net. Mon problème est que chaque fois qu'il y a une erreur dans un champ, certains champs qui sont en dessous de celui qui a des erreurs sont décalés & les rend mauvais. Par exemple: a) Placement initial des champs. B) Une fois qu'un bloc d'erreur/d'aide a été ajouté par le validateur d'amorçage/sur le focus, c) Mettre l'accent sur un autre champ Je voudrais éviter que cela ne se produise. Je crois que c'est un problème avec bootstrap css. J'ai essayé d'utiliser la classe pull-droite sur le parent déroulant de div & cela ne fonctionne pas

Voici mon code raccourci par souci de concision:

<div class="form-group col-xs-12 col-sm-3 "> 
     <asp:Label ID="lblFirstName" runat="server" Text="الاسم الأول" AssociatedControlID="txtFirstName" CssClass="control-label" ></asp:Label> 

     <asp:TextBox ID="txtFirstName" runat="server" CssClass="form-control OnlyArabic " placeholder="الاسم الأول" MaxLength="144" required 
      data-bv-notempty="true" data-bv-notempty-message="الرجاء ادخال الاسم الأول"    
      ></asp:TextBox> 
    </div> 

    <div class="form-group col-xs-12 col-sm-3 "> 
     <asp:Label ID="lblMiddleName" runat="server" Text="اسم الأب" AssociatedControlID="txtMiddleName" CssClass="control-label" ></asp:Label> 
     <asp:TextBox ID="txtMiddleName" runat="server" CssClass="form-control OnlyArabic " placeholder="اسم الأب" MaxLength="144" required 
      data-bv-notempty="true" data-bv-notempty-message="الرجاء ادخال اسم الأب" 
    </div> 

    <div class="form-group col-xs-12 col-sm-3 "> 
     <asp:Label ID="lblThirdName" runat="server" Text="اسم الجد" AssociatedControlID="txtThirdName" CssClass="control-label" ></asp:Label> 
     <asp:TextBox ID="txtThirdName" runat="server" CssClass="form-control OnlyArabic " placeholder="اسم الجد" MaxLength="144" required 
      data-bv-notempty="true" data-bv-notempty-message="الرجاء ادخال اسم الجد " 
    </div> 

    <div class="form-group col-xs-12 col-sm-3 "> 
     <asp:Label ID="lblFamilyName" runat="server" Text="اسم العائلة" AssociatedControlID="txtFamilyName" CssClass="control-label" ></asp:Label> 
     <asp:TextBox ID="txtFamilyName" runat="server" CssClass="form-control OnlyArabic " placeholder="اسم العائله" MaxLength="144" required 
      data-bv-notempty="true" data-bv-notempty-message="الرجاء ادخال اسم العائلة " 
    </div> 


    <div class="form-group col-xs-12 col-sm-6 "> 
     <asp:Label ID="lblNationality" runat="server" Text="الجنسية" AssociatedControlID="ddlNationality" CssClass="control-label" ></asp:Label> 
     <asp:DropDownList ID="ddlNationality" runat="server" CssClass="MakeSelect2 form-control" DataSourceID="objDSNationality" DataTextField="Description" DataValueField="Code" 
      data-bv-notempty="true" data-bv-notempty-message="الرجاء ادخال الجنسية" 
      > 
     </asp:DropDownList> 

    </div> 
    <div class="form-group col-xs-12 col-sm-6 "> 
     <asp:Label ID="lblIdTypeCode" runat="server" Text="نوع الهوية" AssociatedControlID="ddlIdTypeCode" CssClass="control-label" ></asp:Label> 
     <asp:DropDownList ID="ddlIdTypeCode" runat="server" CssClass="MakeSelect2 form-control idType " DataSourceID="objDSIdTypeCode" DataTextField="Description" DataValueField="Code" 
     data-bv-notempty="true" data-bv-notempty-message="الرجاء ادخال نوع الهوية" > 
     </asp:DropDownList>  
    </div> 
    <div class="form-group col-xs-12 col-sm-6 "> 
     <asp:Label ID="lblIDNo" runat="server" Text="رقم الهوية" AssociatedControlID="txtIDNo" CssClass="control-label" ></asp:Label> 
     <asp:TextBox ID="txtIDNo" runat="server" CssClass="form-control AllowAlphaNumeric idno" placeholder="رقم الهوية" MaxLength="10" required 
      data-bv-notempty="true" data-bv-notempty-message="الرجاء ادخال رقم الهوية" 
      ></asp:TextBox> 
    </div> 

Answer 1

a résolu le problème en ajoutant une classe clearfix avant le menu déroulant div.

<div class="clearfix"></div>