gpt4 book ai didi

css - 如何将 Bootstrap ValidationMessageFor 放在正确的位置?

转载 作者:太空狗 更新时间:2023-10-29 12:25:38 29 4
gpt4 key购买 nike

我正在为我的 Web 应用程序使用 Bootstrap ,但我在将消息状态置于正确位置的验证消息方面遇到了问题。现在我使用了这个 link 中的示例, 使用此代码:

<div class="control-group error">
<label class="control-label" for="inputError">Input with error</label>
<div class="controls">
<input type="text" id="inputError">
<span class="help-inline">Please correct the error</span>
</div>
</div>

现在我使用的代码:

<h4 class="form-signin-heading">Please sign in</h4>
<div class="control-group">
<div class="controls">
@Html.TextBoxFor(u => u.Username, new {placeholder="Username", @class="form-control username", id="inputError"})
<span class="help-inner">@Html.ValidationMessageFor(u => u.Username)</span>
</div>

<div class="controls">
@Html.PasswordFor(u => u.Password, new {placeholder="Password", @class="form-control password"})
@Html.ValidationMessageFor(u=> u.Password)
</div>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>

我的代码执行此操作(也在 fiddle 中:http://jsfiddle.net/4h5E5/1/):

enter image description here

但我不希望将验证消息放在这个位置(如链接中的示例):

enter image description here

最佳答案

请检查这个JS Fiddle Link

HTML Code:

<!DOCTYPE html>
<body>
<div class="container">
<form class="form-signin form-horizontal" role="form">
<h4 class="form-signin-heading">Please sign in</h4>

<div class="form-group">
<div class="col-xs-7 col-sm-7">
<input type="username" class="form-control username" placeholder="Username" required="autofocus" />
</div>
<div class="col-xs-7 col-sm-5"> <span class="help-inline pull-left">Please correct the error</span>

</div>
</div>
<div class="form-group">
<div class="col-xs-7 col-sm-7">
<input type="password" class="form-control password" placeholder="Password" />
</div>
<div class="col-xs-7 col-sm-5"> <span class="help-inline pull-left">Please correct the error</span>

</div>
</div>
<div class="form-group">
<div class="col-xs-7 col-sm-7">
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</div>
</div>
</form>
</div>
<!-- /container -->
<!-- Bootstrap core JavaScript==================================================- ->
<!-- Placed at the end of the document so the pages load faster -->
</body>

我希望这是你想要实现的。

如果您有任何其他问题或未解决,请在下方添加评论。

问候 D.

关于css - 如何将 Bootstrap ValidationMessageFor 放在正确的位置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25112852/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com