我在使用Bootstrap时遇到了一些问题,无法将我的div与容器对齐。
我想要的效果是让div在容器内部完全展开。
它可以在容器的左侧正常工作,但右侧却不能。它会超出屏幕范围。
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:
.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;
}
.action-footer
div是我需要在父容器内100%宽度的元素。但实际上它得到了太多的宽度。
width: 100%
超出页面。我想知道为什么会出现这种情况... - dimiguel