Bootstrap Jumbotron没有成为Body的全宽
Flo*_*ind 10 html css twitter-bootstrap twitter-bootstrap-3
嗨,我正在尝试将我的Jumbotron修复为屏幕的全宽,但不知何故,它需要一个15px padding-left, padding-right.如果我删除填充,水平滚动条会出现一个30px right margin.我使用默认的Bootstrap ver 3.0.3和默认的VS2013布局.根据这个链接,我删除了所有.container页面之外的Jumbotron 看起来像这样
<body>
<div class="navbar navbar-inverse navbar-fixed-top">.... Navigation stuff</div>
<div class="jumbotron specialjum">
<div class="over container body-content">
....page headers and other stuff
</div>
</div>
<p class="just container body-content">
... body text
</p>
</body>
/////////////////////////////////////////////////
body {
padding-top: 50px;
padding-bottom: 20px;
/*background:url("../Images/ps_neutral.png") repeat;*/
}
/* Set padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
.just {
text-align: justify;
}
.specialjum {
background: url('http://fc00.deviantart.net/fs70/i/2013/339/7/1/princess_kenny_korosu_by_theshadowstone-d6wu2zo.png') center;
color:#fff;
background-size: cover;
}
编辑: Firefox + Chrome + IE10结果=== | ================ | ===
关于如何修复布局的任何想法？我没有触及使用Nuget更新的Bootstrap CSS.
为了分享我在Visual Studio 2013中创建MVC Web应用程序后的经验,无论我做什么,我都无法让jumbotron扩展屏幕的宽度.我最终发现它被Views/Shared/_Layout.cshtml页面上的默认**容器body-content标记阻止.删除标签后,它正确显示.希望能帮助任何有类似情况的人开采.
解决办法很简单。这就是我如何划分它：
<body>
<div class="navbar navbar-inverse navbar-fixed-top">.... Navigation stuff</div>
<div> <===================this Div wrapping jumbotron
<div class="jumbotron specialjum">
<div class="over container body-content">
....page headers and other stuff
</div>
</div>
<p class="just container body-content">
... body text
</p>
</div>
</body>
CSS 的任何部分都没有更改。我不知道它为什么有效，但它确实有效。
- 之所以有效，是因为 bootstrap 的创建者很聪明！来自引导程序文档“要使 jumbotron 全宽，并且没有圆角，请将其放在所有 .containers 之外，而是在其中添加一个 .container。” http://getbootstrap.com/components/#jumbotron (11认同)
| 归档时间： |
|
| 查看次数： |
34291 次 |
| 最近记录： |