Question

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

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

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

我已经能够将问题找到＆＃34;碰撞＆＃34;在模板的css和bootstrap之间，因为如果我从BundleConfig文件中删除引导样式表，然后样式按预期呈现。

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

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

提前致谢。

更新

要复制您需要的问题：
- 下载the template I mentioned above
- 创建一个新的ASP .Net MVC 5项目
- 从模板的项目内容文件夹中添加images和styles.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>

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

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

布局页面，下载的布局模板无法正确呈现

1 个答案: