Question

就css而言，我是一个菜鸟。

我在我的asp.net网络表单网站上使用了here的Bootstrap Validator插件和Bootstrap Rtl。

我的问题是，每当字段中出现错误时，某些字段会低于有错误的字段。让他们看起来很糟糕。

对于Eg： a）字段的初始放置。

b）一旦bootstrap验证器/焦点上添加了错误/帮助块。 c）专注于另一个领域我想防止这种情况发生。我相信这是bootstrap css的一个问题。我尝试在下拉式父母div＆amp; amp;它不起作用

以下简要说明了我的代码：

<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

通过在下拉div之前添加clearfix类来解决它。

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

响应式引导程序设计导致div通过添加帮助块而转移

1 个答案: