我是个 CSS 菜鸟。
我使用了来自 here 的 Bootstrap Validator 插件连同 Bootstrap Rtl在我的 asp.net 网络表单网站中。
我的问题是,每当一个字段中出现错误时,错误字段下方的一些字段就会移动并使它们看起来很糟糕。
b) 一旦有错误/帮助 block 被 Bootstrap 验证器/焦点添加。 c) 专注于另一个领域 我想防止这种情况发生。我相信这是 bootstrap css 的问题。我尝试在下拉菜单的父 div 上使用 pull-right 类,但它不起作用
为简洁起见,这里是我的代码:
<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>
最佳答案
通过在下拉 div 之前添加一个 clearfix
类解决了这个问题。
<div class="clearfix"></div>
关于css - 响应式 Bootstrap 设计导致 div 通过添加 help-block 移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46631450/