如何将 Bootstrap ValidationMessageFor 放在正确的位置？答案

【问题标题】：How to put Bootstrap ValidationMessageFor in correct position?如何将 Bootstrap ValidationMessageFor 放在正确的位置？
【发布时间】：2014-09-26 13:59:13
【问题描述】：

我正在为我的 Web 应用程序使用引导程序，但我在验证消息时遇到问题，无法将消息状态置于正确的位置。现在我使用了这个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>

我的代码是这样做的（也在小提琴中：http://jsfiddle.net/4h5E5/1/）：

但我的愿望是将验证消息放在这个位置（如链接中的示例）：

【问题讨论】：

使用 CSS 来定位它。我现在能想到的简单方法是你可以做 float:right;
很有趣，但它只放在输入右侧的末尾（例如用户名）
所以你希望它在右侧，如图所示
是的-Richa，我在我的 style.css 中放在 float 旁边：right、margin-right 和 margin-top，它放置在正确的位置，但响应不起作用......

标签： css twitter-bootstrap validation message

【解决方案1】：

将style = "display:inline" 用于EditorFor 和ValidationMessageFor，如下所示：

<div class="form-group">
    @Html.LabelFor(model => model.UserName, htmlAttributes: new { @class = "control-label col-md-2"})

    <div class="col-md-9">
        @Html.EditorFor(model => model.UserName, new { htmlAttributes = new { @class = "form-control", style = "display:inline" } })
        @Html.ValidationMessageFor(model => model.UserName, "*", new { @class = "text-danger", style = "display:inline" })
    </div>

</div>

【讨论】：

【解决方案2】：

请查看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>

我希望这是您想要实现的目标。

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

问候 D.

【讨论】：

是的，它可以工作，但它会缩小我的输入字段？？你对 css 做了什么改动吗？
好的，我发现，css 中也有变化。谢啦！！！！成功了，你是最棒的！
是的，如果你想随着输入的宽度增加，那么改变包装器的宽度，即.form-signin {max-width: 600px;}
我需要更多的东西，如何将歌唱形式放在屏幕中间。如果您能看到，它会将其放在屏幕左侧。现在是输入和中间的错误。我只需要中间的歌唱形式。
如果您想在中间显示所有内容，那么我建议您将错误消息显示为工具提示，而不是使用如上所示的布局结构。请参考此JS Fiddle code。由于col-xs-7 col-sm-7 类，布局向左移动。工具提示是最好的解决方案。

【解决方案3】：

你试过吗？（未经测试）

  <div class="controls">
    <input type="text" id="inputError" class="pull-left">
    <span class="help-inline pull-left">Please correct the error</span>
  </div>

ps.如果你能做一个小提琴会很棒。

【讨论】：

它是一样的......我在这里创建了小提琴：jsfiddle.net/4h5E5/1（也发布了问题）