100% 宽度导致 div 在容器中时离开屏幕

Question

所以我在将容器中的 div 与 Bootstrap 对齐时遇到了一些麻烦。

我想要做的是让 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% 宽度的那个。相反，它的宽度太大了。

原文由 Chris 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你的主要问题实际上是在这里：

 @media (min-width:500px) {
    .caption-2 .action-footer {
        margin:0;
        position: absolute;
        bottom: 0;
        height: 10%;
        width: 100%;
    }
}

将其更改为： position: relative; 请记住，您正在为移动设备构建它，它应该可以完成这项工作。每当使用 container-fluid 时，大多数元素都有一个 相对 位置，因此它们可以与屏幕宽度重新对齐。

原文由 ZombieChowder 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您需要应用 CSS 属性 box-sizing: border-box;

 .action-footer {
    box-sizing: border-box;
}

原文由 Victor Leontyev 发布，翻译遵循 CC BY-SA 3.0 许可协议