响应式引导程序设计导致div加上帮助块转移

我在我的asp.net web表单网站上使用了从here以及Bootstrap Rtl的Bootstrap Validator插件。

我的问题是，每当一个字段出现错误，一些低于错误的字段被移动&使它们看起来很糟糕。

例如： a）字段初始位置。

b）一旦通过bootstrap validator/on focus添加了错误/帮助块， c）专注于另一个领域我想阻止这种情况发生。我相信这是一个引导CSS的问题。我尝试使用上下拉的父DIV &右拉式类不起作用

这里是我的代码缩短为简洁：

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

来源

2017-10-08 Abdul Rehman Sayed

通过下拉DIV之前加入clearfix类解决了这个问题。

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

来源

2017-10-08 13:14:36

响应式引导程序设计导致div加上帮助块转移

回答

相关问题