无法覆盖 MVC 中的 bootstrap 样式

Question

我在尝试为我的应用程序中的某些控件设置样式时遇到了一些困难。我不希望输入在屏幕的整个宽度上伸展，所以我试图设置宽度。下面是我的表格。

我有这样的表格：

    @using (Html.BeginForm("Action", "Controller", FormMethod.Post))
    {
        @Html.AntiForgeryToken()
        <hr />
        @Html.ValidationSummary(true)

        <div class="form-group">
            <label>Email</label>
            <input class="form-control input-width" placeholder="email" type="email" />
        </div> 
    }

这是我的风格"input-width":

.input-width{
    width:300px !important;
}

还有我的 BundleConfig：

public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js", 
                        "~/Scripts/jquery.unobtrusive*",
                        "~/Scripts/jquery.validate.min.js"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(

                      "~/Scripts/bootstrap.js",
                      "~/Scripts/respond.js",
                      "~/Scripts/Model Scripts/Main/Main.js"));

            bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/Site.css"));

            bundles.IgnoreList.Clear();

            BundleTable.EnableOptimizations = false;
        }

这是我的主布局页面：

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>

    @Scripts.Render("~/bundles/modernizr")
    @Styles.Render("~/Content/css")

</head>
<body>

    @{Html.RenderPartial("_NavBar");}

    <div class="container" id="MainBody">
        @RenderBody()
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", false)

</body>
</html>

为什么我的控件中添加了 none 个样式？我加载样式表的顺序有误吗？

Answer 1

据我所知，预计会覆盖默认 bootstrap 值的样式位于 'Site.css' 中。尝试在不使用捆绑包的情况下添加它，例如：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Scripts.Render("~/bundles/modernizr")
    @Styles.Render("~/Content/css")
    <link rel="stylesheet" href="/Content/Site.css">
</head>
<body>
    @{Html.RenderPartial("_NavBar");}
    <div class="container" id="MainBody">
        @RenderBody()
    </div>
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", false)
</body>
</html>

我想 ASP 捆绑引擎会比 bootstrap 更早地呈现您的 css。

Answer 2

我不太清楚为什么，但是改变了“@Styles.Render(”~/Content/css”)”和“@Scripts.Render(”~[=14=的顺序]")" 似乎解决了我的问题。我的主布局文件现在看起来像这样。

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>

    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</head>
<body>

    @{Html.RenderPartial("_NavBar");}

    <div class="container" id="MainBody">
        @RenderBody()
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", false)

</body>
</html>

Answer 3

如果你添加 .form-control 这会添加到输入显示：table-cell 强制宽度为 100%。如果您不想删除此 class，请检查您的 css 规则的特异性，试试这个：

.form-group .form-control.input-width

无法覆盖 MVC 中的 bootstrap 样式

Cannot override bootstrap style in MVC

css

asp.net-mvc

c#-4.0

twitter-bootstrap-3