Bootstrap Jumbotron 没有变成身体的全宽答案

【问题标题】：Bootstrap Jumbotron not becoming full width of BodyBootstrap Jumbotron 没有变成身体的全宽
【发布时间】：2014-01-18 14:30:16
【问题描述】：

您好，我正在尝试将我的 Jumbotron 修复为屏幕全宽，但不知何故它需要 15px padding-left, padding-right。如果我删除填充，水平滚动条会出现30px right margin。我正在使用默认的 Bootstrap 版本 3.0.3 和默认的 VS2013 布局。按照这个link我删除了所有.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。

【问题讨论】：

您是否尝试将 container-fluid 类添加到 jumbotron div 中？
我试过它不工作。
.container-fluid 不在 3.0.3 中，在 3.1.0 中
也可以在不同的浏览器中查看您的页面。它可能是您正在使用的任何浏览器添加的一些默认标记，尽管 bootstrap 3 中的 normalize.css 文件应该负责这一点。
@Jerreck 在所有浏览器中都一样，看看我的编辑，看看发生了什么。

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

解决方案很简单。我就是这样 div 的：

    <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。” getbootstrap.com/components/#jumbotron

【解决方案2】：

_Layout.cshtml 中的另一个选项（其中“主页”是您想要全宽的页面）：

@if (ViewData["Title"].Equals("Home"))
{
    @RenderBody()
}
else
{
    <div class="container container-main">
        <main role="main">
            @RenderBody()
        </main>
    </div>
}

【讨论】：

【解决方案3】：

只是为了分享我在 Visual Studio 2013 中创建 MVC Web 应用程序后的经验，无论我做什么，我都无法让 jumbotron 拉伸屏幕的宽度。我最终发现它被 Views/Shared/_Layout.cshtml 页面上的默认 **container body-content 标签阻止了。删除标签后，它正确显示。希望对和我有类似情况的人有所帮助。

【讨论】：

【解决方案4】：

为了使 jumbotron 全宽且没有圆角，请将其放置在所有 .containers 之外，而是在其中添加一个 .container。

【讨论】：

【解决方案5】：

对于可能最终出现在这里的任何其他人，我有一个替代解决方案。我遇到了这个问题，但我无法将我的 Jumbotron 带出它的容器。我所做的只是将它包裹在<div class="row"></div> 中。我还在学习 bootstrap，所以我不知道这是否会导致任何问题，但现在它工作得很好。

【讨论】：

【解决方案6】：

将.container的宽度改为100%：

container { width: 100% }

【讨论】：

【解决方案7】：

如果您只是想删除填充，那么您需要将padding:0; 放入您的.specialjum 并确保在引导之后调用自定义样式表。否则添加padding:0!important;，如果之前需要调用它。还要对margin-right: 重复此操作，并添加width:100%;，如果它没有拉伸到我认为应该已经达到的页面宽度。

见thisjsFiddle

【讨论】：