为什么形成丢失的引导 css？答案

【问题标题】：Why form lost bootstrap css?为什么形成丢失的引导 css？
【发布时间】：2015-05-07 18:02:45
【问题描述】：

我正在学习 MVC，并且正在通过第一个代码制作联系表格。谁能解释一下为什么消息区域小于标题编辑器以及为什么它丢失了引导 css？

@using (Html.BeginForm()) 
{
@Html.AntiForgeryToken()

<div class="form-horizontal">

    <div class="form-group">
        @Html.LabelFor(model => model.title, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.title, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.title, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.message, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.TextAreaFor(model => model.message, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.message, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="wyslij" class="btn btn-default" />
        </div>
    </div>
</div>
}

【问题讨论】：

你能做个小提琴吗
您为什么使用编辑器模板而不是文本框作为标题？
它是脚手架自动生成的，我只是尝试将带有消息的部分更改为文本区域不是编辑器
你能解决你的问题吗，如果有帮助请查看我的回答。

标签： html css asp.net-mvc twitter-bootstrap razor

【解决方案1】：

这是更新后的小提琴 - https://dotnetfiddle.net/DWy02w

输出：

HTML：

@model HelloWorldMvcApp.SampleViewModel
@{
    Layout = null;
}

<!DOCTYPE html>
<!-- template from http://getbootstrap.com/getting-started -->

<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap 101 Template</title>

        <!-- CSS Includes -->
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    </head>

    <body>
        <div class="container col-md-10">
            @using (Html.BeginForm()) 
            {
            @Html.AntiForgeryToken()

            <div class="form-horizontal">           
                <div class="form-group">
                    @Html.LabelFor(model => model.title, new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.TextBoxFor(model => model.title,  new { @class = "form-control" } )
                        @Html.ValidationMessageFor(model => model.title, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.message, new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.TextAreaFor(model => model.message,  new { @class = "form-control" } )
                        @Html.ValidationMessageFor(model => model.message, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-md-offset-2 col-md-10">
                        <input type="submit" value="wyslij" class="btn btn-default" />
                    </div>
                </div>
            </div>
            }
        </div>  
                <!-- JS includes -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>   
        <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
        <script src="//ajax.aspnetcdn.com/ajax/mvc/4.0/jquery.validate.unobtrusive.min.js"></script>
    </body>
</html>

型号：

using System;
using System.ComponentModel.DataAnnotations;

namespace HelloWorldMvcApp
{
    public class SampleViewModel
    {
        public string title
        {
            get;
            set;
        }

        public string message
        {
            get;
            set;
        }
    }
}

【讨论】：

【解决方案2】：

AFAIK 您对引导网格类 (col-*) 的使用是错误的。可能你应该将你的表单包装成一行和一列，像这样：

<div class="row">
  <div class="col-md-10">
    @using(Html.BeginForm())
    {
    ...
    }
  </div>
</div>

关于消息文本区域的宽度，我认为是因为 Site.css 中的样式。您可以尝试删除指向 Site.css 的链接，看看是否有帮助。

【讨论】：

【解决方案3】：

您可能希望使用文本框而不是编辑器模板。替换这个：

@Html.EditorFor(model => model.title, new { htmlAttributes = new { @class = "form-control" } })

有了这个：

@Html.TextBoxFor(model => model.title, new { htmlAttributes = new { @class = "form-control" } })

【讨论】：