简体   繁体   English

由Visual Studio 2013创建的Bootstrap模板无法正常工作

[英]Bootstrap template created by Visual Studio 2013 not working properly

I've generated a new asp.net mvc project based on the new Bootstrap 3 template. 我已经基于新的Bootstrap 3模板生成了一个新的asp.net mvc项目。 This does not seem to work properly, as it does not add any spacing between the header navbar and the content rendered below by Renderbody() . 这似乎无法正常工作,因为它未在标题导航栏和Renderbody()在下面呈现的内容之间添加任何间距。 I've tried pasting in examples from the Bootstrap website and use the css provided by Visual Studio when creating the new page, but with no luck. 我尝试从Bootstrap网站粘贴示例,并在创建新页面时使用Visual Studio提供的css,但是没有运气。

I've attached the following image to describe (Note no spacing between jumbotron and header): 我已附上以下图像进行描述(请注意,巨无霸和标头之间没有空格):

在此处输入图片说明

Here's the markup generated: 这是生成的标记:

<!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-default navbar-fixed-top">
        <div class="container">
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li>@Html.ActionLink("Logout", "Index", "Home")</li>
                </ul>
                <p class="navbar-text navbar-right">
                    Logged in as @(User.Identity.Name)
                </p>
            </div>
        </div>
    </div>

    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

Any help would be greatly appreciated here. 任何帮助将不胜感激在这里。

This is not controlled by bootstrap, but by the Site.css file 这不是由引导程序控制的,而是由Site.css文件控制的

body { padding-top: 50px; padding-bottom: 20px; }

by changing the padding-top value to eg 75 or 100, you get a gap between the nav bar and the content 通过将padding-top值更改为例如75或100,可以在导航栏和内容之间获得一个间隙

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM