css - Bootstrap 样式表的正确顺序

标签 css twitter-bootstrap

Twitter Bootstrap API告诉我添加我的 css 以将填充添加到 bootstrap css 和 bootstrap-responsive css 之间的 body 元素。我已经在 _master 文件中这样做了,但它似乎还没有添加填充。

我是不是读错了,还是其他地方可能有问题?

我的_master 头部

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Get Bootstrapped</title>
<link href="@Url.Content("~/css/bootstrap.css")" rel="stylesheet" />
<link href="@Url.Content("~/css/skin.css")" rel="stylesheet" />
<link href="@Url.Content("~/css/bootstrap-responsive.css")" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <a class="brand" href="#">Title</a>
                <ul class="nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                </ul>
            </div>
        </div>
        <div>
            @RenderBody()
        </div>
    </div>
    <script src="~/js/bootstrap.js"></script>
</body>

CSS

body {
    padding-bottom: 40px;
}

body 填充无效的可视化(一直滚动到顶部) enter image description here

最佳答案

您需要做的是给包含正文的 div 一个 padding-top: 40px

例如:Fiddle

<div class="container">
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="navbar-inner">
            <a class="brand" href="#">Title</a>
            <ul class="nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
            </ul>
        </div>
    </div>

    <div style="padding-top: 40px">
        some content 1<br />
        some content 2<br />
        some content 3<br />
        some content 4<br />
    </div>
</div>

关于css - Bootstrap 样式表的正确顺序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14135887/

相关文章:

html - 使响应式网站适合移动设备的技巧

html - 全宽输入追加搜索按钮

html - Twitter Bootstrap 导航栏 - 右对齐控件

javascript - css回调函数设置宽度失败?

css - <strong> 标记未显示在 Chrome 中,但显示在所有其他浏览器中

html - 带有背景图像和圆 Angular 的底部斜线

css - 使用 CSS 播放动画后更改图像位置或类?

html - 具有不同内容高度的粘性页脚,无需页面刷新

javascript - 显示禁用按钮的弹出窗口

javascript - 背景暗淡的 Bootstrap 下拉菜单