Question

最近，我开始使用我喜欢的MVC模式5，但不幸的是我没有使用Bootstrap的良好体验。

我希望我的应用程序看起来整洁。（没有超级添加剂，只是干净整洁）。同时，我希望在所有设备上以相同的方式工作（如果可能），例如iPhone，平板电脑，台式电脑和Mac以及Android。

我在你的论坛（here is the article）找到了答案，但我不确定它是否能正常运作。

问题：

有人可以告诉我这些解决方案能够正常使用哪些网络浏览器以及哪些方法无法正常工作。只是。该解决方案的兼容性是什么。

环境： MVC 5与jQuery 2.1.1，modernizr 2.8.3，Bootstrap 3.2.0，Razor 3.2.2

有我的_Layout页面（几乎是默认布局，我只更改了fooder部分）。

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
                @Html.Partial("_LoginPartial")
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <div class="navbar navbar-default navbar-fixed-bottom">
                <div class="container" style="font-size: .8em">
                    <p class="navbar-text">
                        &copy; @DateTime.Now.Year - My ASP.NET Application
                    </p>
                </div>
            </div>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

＆＃13;

＆＃13; Content文件夹中有我的css文件Site.css。也是默认值，我只改变了padding-bootom和padding-top的大小（根据建议bootstrap Link to documentation）。

＆＃13;

body {
    padding-bottom: 70px;
    padding-top: 70px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

＆＃13;

MVC 5 bootstrap - 与Web浏览器兼容

0 个答案: