Question

我正在升级最新的Bootstrap。但是，我们在所有表单中使用了以下代码

<form class="form-horizontal">
    <div class="control-group">
    @Html.LabelFor(model => model.Name, new { @class = "control-label" })
    <div class="controls">
        @Html.EditorFor(model => model.Name)
        @Html.ValidationMessageFor(model => model.Name)
    </div>
   </div>
  </form>

我知道Bootstrap 3中的控件已经消失，而控制组已被form-group取代。

但是一旦我们改变了这些，我就会发现我们仍然没有像以前那样得到同样的观点。这就是Bootstrap 3专注于移动优先方法的原因。为了获得相同的样式，我们可能需要使用网格视图来调整输入的宽度。

但我无法弄清楚如何显示（显示）错误验证消息？

替换这些表单以获得类似视图的最佳代码是什么？

Answer 1

Bootstrap 3将网格引入您的表单布局。您需要开始使用col-语法来指示标签和控件的宽度。您还将完全删除控件类。这是重写HTML的一种相当标准的方法，但请记住，每个元素可以有多个col-class来支持响应式布局。

 <form class="form-horizontal">
    <div class="form-group">
    @Html.LabelFor(model => model.Name, new { @class = "control-label col-sm-3" })
    <div class="col-sm-9">
        @Html.EditorFor(model => model.Name)
        @Html.ValidationMessageFor(model => model.Name)
    </div>
   </div>
  </form>

此外，输入预计会有form-control类，因此您需要为此更新生成器。

从Bootstrap 2.3.2到Bootstrap 3如何更改控制组？

1 个答案: