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 填充无效的可视化(一直滚动到顶部)
最佳答案
您需要做的是给包含正文的 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/