Fatal编程技术网
  • css/
  • Css 已下载布局模板的布局页面未正确呈现

Css 已下载布局模板的布局页面未正确呈现

css twitter-bootstrap asp.net-mvc-5

Css 已下载布局模板的布局页面未正确呈现,css,twitter-bootstrap,asp.net-mvc-5,Css,Twitter Bootstrap,Asp.net Mvc 5,我创建了一个新的ASP.NETMVC5项目，其中包含所有示例视图、控制器等。它拥有jQuery和Bootstrap的最新版本 所以我想在它上面有一个好的模板，所以我下载并将图像和css文件添加到内容文件夹中，修改BundleConfig类以便包含新的css文件，并且还更改了_ViewStart.cshtml文件，以便采用我命名为_myLayout.cshtml的新布局 从技术上讲，它工作得非常好，因为所有页面现在都使用了新的布局模板，但呈现不正确，菜单看起来被截断，页眉图像和内容部分超出了右侧的

我创建了一个新的ASP.NETMVC5项目，其中包含所有示例视图、控制器等。它拥有jQuery和Bootstrap的最新版本

所以我想在它上面有一个好的模板，所以我下载并将图像和css文件添加到内容文件夹中，修改BundleConfig类以便包含新的css文件，并且还更改了_ViewStart.cshtml文件，以便采用我命名为_myLayout.cshtml的新布局

从技术上讲，它工作得非常好，因为所有页面现在都使用了新的布局模板，但呈现不正确，菜单看起来被截断，页眉图像和内容部分超出了右侧的边框，页脚在底部显示了一个不应该存在的边距

我已经能够将问题精确定位到模板的css和引导之间的冲突上，因为如果我从BundleConfig文件中删除引导样式表，然后按照预期呈现样式

我更多的是一个后端/javascript开发人员，所以我对css的了解非常有限，我对这一点非常感兴趣。我甚至不知道应该包含哪些代码，而且这两个css文件都太大，无法在问题中包含它们

如果有人能够帮助我，我将非常感谢，并且/或者如果有人能够提供一些线索，说明哪些css部分将有助于在文章中包含以帮助找出问题，请让我知道

提前谢谢

更新：

要复制此问题，您必须： -下载 -创建一个新的ASP.NETMVC5项目 -从项目内容文件夹的模板中添加images和styles.css文件 -在项目的共享文件夹上创建一个名为_myLayout.cshtml的新布局页面 -对这些文件执行以下更改：

捆绑图

using System.Web;
using System.Web.Optimization;

namespace SC.Web
{
    public class BundleConfig
    {
        // For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate*"));

            // 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"));

            bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/site.css",
                      "~/Content/styles.css"));
        }
    }
}
_ViewStart.cshtml

@{
    Layout = "~/Views/Shared/_myLayout.cshtml";
}
_myLayout.cshtml

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewBag.Title - My ASP.NET Application</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div id="main">
        <!-- start header -->
        <div id="header">
            <div id="logo">
                <h1><a href="#">metamorph_highway</a></h1>
                <h2><a href="http://www.metamorphozis.com/" id="metamorph">Design by Metamorphosis Design</a></h2>
            </div>
            <div id="menu">
                <ul>
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
            </div>
            <!-- end header -->
        </div>
        <hr />
        <!-- start page -->
        <div id="page">
            <!-- start content -->
            <div id="content">
                @RenderBody()
            </div>
            <!-- end content -->
            <div style="clear: both;">&nbsp;</div>
        </div>
        <!-- end page -->
        <hr />
        <!-- start footer -->
        <div id="footer">
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
            <p>Copyright &copy; 2008. <a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a> | <a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional"><abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" title="This page validates as CSS"><abbr title="Cascading Style Sheets">CSS</abbr></a></p>
            <p>
                Design by <a href="http://www.metamorphozis.com/" title="Free Site Templates">Free Site Templates</a>, coded by <a href="http://www.flashtemplatesdesign.com" title="Free Flash Templates">Free Flash Templates</a>
            </p>
        </div>
    </div>
    <!-- end footer -->
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>
事实证明，在引导上有这样的定义：

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
由于我下载的模板被弄乱了，我在自己的css文件中添加了以下内容：

*{
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}
我不知道以后这是否会导致引导程序无法正常工作，如果发生这种情况，我将不得不处理。

您的描述很好，但因为没有代码可供查看，所以这个问题无法回答。始终提供您的代码。@ErikPhilips这是我所能做的最好的知识：