具有已下载布局模板的布局页面未正确呈现答案

【问题标题】：Layout page with downloaded layout template not rendering properly具有已下载布局模板的布局页面未正确呈现
【发布时间】：2015-05-07 03:40:28
【问题描述】：

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

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

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

如果我从 BundleConfig 文件中删除引导样式表，然后样式按预期呈现，我已经能够将问题确定为模板的 css 和引导程序之间的“冲突”。

我更像是一个后端/javascript 开发人员，所以我对 css 的了解非常有限，而且我对这方面的知识有点过头了。以至于我什至不知道要包含哪些代码，而且两个 css 文件都太大而无法将它们包含在问题中。

如果有人能够提供帮助，我将不胜感激和/或如果有人可以提供一些线索，说明哪些 css 部分可以包含在帖子中以帮助查明问题，请告诉我。

提前致谢。

更新：

要复制问题，您必须：
- 下载the template I mentioned above
- 创建一个新的 ASP .Net MVC 5 项目
- 在项目的内容文件夹中添加模板中的图像和样式.css 文件
- 在项目的共享文件夹中创建一个名为 _myLayout.cshtml
的新布局页面 - 对这些文件进行以下更改：

BundleConfig.cs

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>

【问题讨论】：

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

标签： css twitter-bootstrap asp.net-mvc-5

【解决方案1】：

原来在 bootstrap 上有这样的定义：

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

我不知道以后这是否会导致引导程序无法正常运行，如果发生这种情况，我将不得不处理它。

【讨论】：