如何将Bootstrap ValidationMessageFor置于正确的位置？

Question

如何将Bootstrap ValidationMessageFor置于正确的位置？

Dan*_*iKR 4 css validation message twitter-bootstrap

我正在为我的Web应用程序使用bootstrap,我在验证消息时遇到问题,因为它将消息状态置于正确的位置.现在我在此链接中使用此示例,使用以下代码:

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

Run Code Online (Sandbox Code Playgroud)

现在我使用的代码:

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

Run Code Online (Sandbox Code Playgroud)

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

在此输入图像描述

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

在此输入图像描述

Answer 1

Dev*_*ria 5

请检查这个JS Fiddle Link

HTML代码:

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

Run Code Online (Sandbox Code Playgroud)

我希望这是你想要实现的目标.

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

问候D.

是的,如果你想增加输入的宽度,那么改变包装宽度,即`.form-signin {max-width:600px;}` (2认同)
如果您想在中间显示所有内容,那么我建议您将错误消息显示为工具提示,而不是使用如上所示的布局结构.请参阅[JS小提琴代码](http://jsfiddle.net/devangkantharia/E8Nk8/7/).由于`col-xs-7 col-sm-7`类,布局向左移动.工具提示是首选解决方案. (2认同)

归档时间：	11 年，3 月前
查看次数：	7236 次
最近记录：	9 年，3 月前