twitter-bootstrap 100% 宽度导致 div 在容器中离开屏幕
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43585134/
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
100% Width causes div to go off screen while in container
提问by Chris
So I'm having a little trouble aligning my div in the container with Bootstrap.
所以我在将容器中的 div 与 Bootstrap 对齐时遇到了一些麻烦。
What I'm trying to do is get the div to extend full width inside the container width.
我想要做的是让 div 在容器宽度内扩展全宽。
It works on the left side of the container but it doesn't on the right. It goes off-screen.
它适用于容器的左侧，但不适用于右侧。它离开屏幕。
HTML:
HTML：
<!-- Image With Action Section -->
<section class="special_section">
<div class="container-fluid" style="max-height: 25%">
<div class="row">
<div class="col-sm-12">
<div class="caption-2">
<img src="background-image-url" class="img-full-width img-responsive" alt="" />
<div class="container">
<div class="action-footer">
<div class="col-sm-10">
<h4 class="caption-text">Title</h4>
</div>
<div class="col-sm-2">
Link
</div>
</div>
<div class="caption">
<h4>Title</h4>
<p>Content</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
CSS:
CSS：
.caption-2 .action-footer {
margin: -1px 0 0 0;
padding: 10px;
font-size: 15px;
}
@media (min-width:500px) {
.caption-2 .action-footer {
margin:0;
position: absolute;
bottom: 0;
height: 10%;
width: 100%;
}
}
.action-footer .col-md-12 {
margin-top: -10px;
}
The .action-footerdiv is the one that I need to be 100% width inside the parent container. Instead it get's way too much width.
的.action-footerDIV是，我需要为100％的宽度的父容器内部的一个。相反，它的宽度太大了。
回答by Victor Leontyev
You need to apply CSS property box-sizing: border-box;
您需要应用 CSS 属性 box-sizing: border-box;
.action-footer {
box-sizing: border-box;
}
回答by ZombieChowder
You're main problem is actually here:
你的主要问题实际上在这里：
@media (min-width:500px) {
.caption-2 .action-footer {
margin:0;
position: absolute;
bottom: 0;
height: 10%;
width: 100%;
}
}
Change it to: position: relative;Having in mind that you are building this for mobile, it should do the job. Whenever using container-fluid, most of the elements have a relativeposition so they can re-align with the screen width.
将其更改为： position: relative;考虑到您正在为移动设备构建它，它应该可以胜任。每当使用container-fluid 时，大多数元素都有一个相对位置，因此它们可以与屏幕宽度重新对齐。
回答by Sahil Dhir
Just replace the order of containerand action-footerto get the desired result also added left:0pxto ation-footerso it always start from left of body.
只需更换的顺序container和action-footer获得期望的结果还补充left:0px到ation-footer，因此总是从身体左侧开始。
@media (min-width:500px) {
.caption-2 .action-footer {
margin: 0;
position: absolute;
bottom: 0;
height: 10%;
width: 100%;
left:0px;
}
}
Here is the working code:
这是工作代码：
.caption-2 .action-footer {
margin: -1px 0 0 0;
padding: 10px;
font-size: 15px;
}
@media (min-width:500px) {
.caption-2 .action-footer {
margin: 0;
position: absolute;
bottom: 0;
height: 10%;
width: 100%;
left:0px;
}
}
.action-footer .col-md-12 {
margin-top: -10px;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="special_section">
<div class="container-fluid" style="max-height: 25%">
<div class="row">
<div class="col-sm-12">
<div class="caption-2">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" class="img-full-width img-responsive" alt="" />
<div class="action-footer">
<div class="container">
<div class="col-sm-10">
<h4 class="caption-text">Title</h4>
</div>
<div class="col-sm-2">
Link
</div>
</div>
<div class="container">
<div class="caption">
<h4>Title</h4>
<p>Content</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>