Html Bootstrap Jumbotron 没有变成 Body 的全宽
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20860982/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Jumbotron not becoming full width of Body
提问by Flood Gravemind
Hi I am trying to fix my Jumbotron to be full width of the screen but somehow it need a 15px padding-left, padding-right. If I remove the padding the horizontal scrollbar appears with a 30px right margin. I am using the default Bootstrap ver 3.0.3 and default VS2013 layout. As per this linkI removed the Jumbotron outside all .containermy page looks sth like this
嗨，我正在尝试将我的 Jumbotron 修复为屏幕的全宽，但不知何故它需要一个15px padding-left, padding-right. 如果我删除填充水平滚动条会出现一个30px right margin. 我使用的是默认的 Bootstrap 版本 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;
}
Edit:Firefox + Chrome + IE10 results ===|================|===
编辑：Firefox + Chrome + IE10 结果 ===|==================|===
Any Ideas on how to fix the layout? I haven't touch the Bootstrap CSS which I updated using Nuget.
关于如何修复布局的任何想法？我还没有接触过使用 Nuget 更新的 Bootstrap CSS。
采纳答案by Flood Gravemind
Hi guys the solution was simple this is how I div it
大家好，解决方案很简单，这就是我如何划分它
<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>
No Changes to any part of the CSS. Dont know why it works but it just Works.
对 CSS 的任何部分都没有更改。不知道为什么它有效，但它只是有效。
回答by snapper
Just to share my experience after creating an MVC web application in Visual Studio 2013 I could not get the jumbotron to stretch the width of the screen no matter what I did. I ultimately found that it was being blocked by a default **container body-content tag on the Views/Shared/_Layout.cshtml page. After removing the tag it displayed correctly. Hope that helps anyone with a similar situation to mine.
只是为了分享我在 Visual Studio 2013 中创建 MVC Web 应用程序后的经验，无论我做什么，我都无法让超大屏幕拉伸屏幕的宽度。我最终发现它被 Views/Shared/_Layout.cshtml 页面上的默认 **container body-content 标签阻止。删除标签后，它显示正确。希望能帮助到和我有类似情况的人。
回答by Jeremy
If you're just trying to remove the padding, then you'll want to put padding:0;in your .specialjumand make sure that the custom stylesheet is called after bootstrap. Otherwise add padding:0!important;if it needs to be called before. Also repeat this for margin-right:and add in width:100%;if it isn't stretching to the width of the page which I believe it should already.
如果你只是想去除填充，那么你会希望把padding:0;你的.specialjum，并确保自定义样式表引导后调用。否则padding:0!important;如果之前需要调用则添加。如果它没有拉伸到我认为应该已经达到的页面宽度，也重复此操作margin-right:并添加width:100%;。
See thisjsFiddle
看到这个jsFiddle
回答by Rob L
Another option in _Layout.cshtml (Where "Home" is the page you want to be full width):
_Layout.cshtml 中的另一个选项（其中“主页”是您想要全宽的页面）：
@if (ViewData["Title"].Equals("Home"))
{
@RenderBody()
}
else
{
<div class="container container-main">
<main role="main">
@RenderBody()
</main>
</div>
}
回答by Peavey2787
For anyone else that may end up here I have an alternative solution. I ran into this problem, but I just couldn't take my Jumbotron outside of it's container. What I did is just wrapped it in a <div class="row"></div>.
I'm still learning bootstrap so I don't know if this will cause any problems down the road, but for now it works pretty good.
对于可能会在这里结束的其他人，我有一个替代解决方案。我遇到了这个问题，但我无法将我的 Jumbotron 带出它的容器。我所做的只是将它包裹在<div class="row"></div>. 我仍在学习引导程序，所以我不知道这是否会导致任何问题，但现在它工作得很好。
回答by Eldiyar Talantbek
In order to make the jumbotronfull width, and without rounded corners, place it outside all .containersand instead add a .container within.
为了使jumbotron全宽且没有圆角，请将其放置在所有 .containers 之外，而是在其中添加一个 .container。
回答by Mohammed Raja
Change width of .containerto 100%:
将宽度更改.container为 100%：
container { width: 100% }
