Question

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

我有一个这样的表格：

Local<Function> cb = Local<Function>::Cast(args[1]);
const unsigned argc = 2;
Local<Value> argv[argc] = {Number::New(isolate, value)};
cb->Call(isolate->GetCurrentContext()->Global(), argc, argv);

这是我的风格“输入宽度”：

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

我的BundleConfig：

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

这是我的主布局页面：

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

为什么我的控件中没有添加任何样式？我的订单加载样式表是错误的吗？

Answer 1

据我所知，希望覆盖默认引导程序值的样式位于＆＃39; Site.css＆＃39;中。尝试添加它而不使用捆绑包，例如：

<!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 Bundle引擎会先提交你的css引导程序。

Answer 2

我不太清楚为什么，但改变了＃34; @ Styles.Render（＆＃34;〜/ Content / css＆＃34;）＆＃34;的顺序。和＃34; @ Scripts.Render（＆＃34;〜/ bundles / modernizr＆＃34;）＆＃34;好像已经解决了我的问题。我的主布局文件现在看起来像这样。

<!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％。如果您不想删除此课程，请检查您的css规则的具体情况，请尝试以下操作：

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

无法覆盖MVC中的引导程序样式

3 个答案: