我正在将 Bootstrap 3 与 ASP.NET Webforms 一起使用，并且我对 Bootstrap 完全陌生。我正在开发的 Web 表单使用 ASP.net 验证控件。我的网络表单有一个包含两列的标准布局，我使用“form-group”类对我的标签和输入字段进行分组。
现在的问题是，当我将标签、输入字段及其验证器放置在 Bootstrap“form-group”类中时，验证器的文本属性中的消息在验证后显示在下一行中。我希望它显示在输入字段旁边。有什么替代方法可以做到这一点吗？
<div class="form-group">
<asp:Label runat="server" AssociatedControlID="txtBox">Address <span class="required">*</span></asp:Label>
<asp:TextBox id="txtBox" runat="server" CssClass="form-control"/>
<asp:RequiredFieldValidator ID="rfvLine1" ValidationGroup="<%# ValidationGroup %>" ControlToValidate="txtBox" runat="server" Display="Dynamic" ErrorMessage="Line 1 is required." Text="*"/>
</div>
最佳答案
最简单的方法是在单独的列中创建验证。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text/css">
.required {
color: #e31937;
font-family: Verdana;
margin: 0 5px;
}
.field-validation-error {
color: #e31937;
font-weight: bold;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<br />
<div class="container form-horizontal">
<div class="form-group">
<asp:Label runat="server"
AssociatedControlID="txtBox"
CssClass="col-xs-12 col-sm-4 control-label">
Address
<span class="required">*</span>
</asp:Label>
<div class="col-xs-12 col-sm-4 ">
<asp:TextBox ID="txtBox" runat="server"
CssClass="form-control" />
</div>
<div class="col-xs-12 col-sm-4 form-control-static">
<asp:RequiredFieldValidator ID="rfvLine1"
ControlToValidate="txtBox" runat="server"
Display="Dynamic"
CssClass="field-validation-error"
Text="Line 1 is required." />
</div>
</div>
<div class="form-group">
<div class="col-xs-12 col-sm-offset-4 col-sm-4 ">
<asp:Button runat="server" ID="SubmitButton"
Text="Submit" CssClass="btn btn-primary" />
</div>
</div>
</div>
</form>
</body>
</html>
关于asp.net - 如何在 Bootstrap 类中包装 ASP.net 验证控件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39374180/