Question

您好我正在尝试将我的Jumbotron修复为屏幕的全宽，但不知何故需要15px padding-left, padding-right。如果我删除填充，则水平滚动条显示为30px right margin。我使用默认的Bootstrap ver 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。

Answer 1

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

Answer 2

大家好，解决方法很简单就是我这样做的方法

    <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的任何部分。不知道为什么它有效，但它只是工作。

Answer 3

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

参见this jsFiddle

Answer 4

对于其他可能在此结束的人，我有另一种解决方案。我遇到了这个问题，但我不能把我的Jumbotron带到它的容器外面。我所做的只是将其包裹在<div class="row"></div>中。我还在学习自助训练，所以我不知道这是否会引起任何问题，但现在它的效果非常好。

Answer 5

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

Answer 6

_Layout.cshtml中的另一个选项（其中“主页”是要全角显示的页面）：

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

Answer 7

将.container的宽度更改为100％：

container { width: 100% }

Bootstrap Jumbotron没有成为Body的全宽

7 个答案: