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

【问题标题】：100% Width causes div to go off screen while in container100% 宽度导致 div 在容器中时离开屏幕
【发布时间】：2017-04-24 10:00:53
【问题描述】：

所以我在将容器中的 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% 宽度的那个。相反，它的宽度太大了。

【问题讨论】：

标签： html css twitter-bootstrap containers

【解决方案1】：

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

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

【讨论】：

Bootstrap 自动将其应用于所有元素。所以不幸的是这行不通
这是我的问题。我将这种样式应用于我的所有元素，并且我的元素不再使用width: 100% 离开页面。我想知道为什么这甚至存在......

【解决方案2】：

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

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

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

【讨论】：

对，这实际上使它的宽度正确，现在唯一的问题是 div 移动到图像下方而不是在图像上，但这是正确的解决方案。谢谢！
@Chris 我认为这完全是一个新问题。尝试重新排列代码或使用 z-index 将一个元素置于另一个元素之上。

【解决方案3】：

只需替换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;
  }
}

这是工作代码：

.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>

【讨论】：