容器外的 DIV答案

【问题标题】：DIV outside container容器外的 DIV
【发布时间】：2018-06-29 19:55:37
【问题描述】：

我对从容器中取出的 div 有疑问。当一个绿色的 div 接触到页面的边缘时，页面并没有剪切它，而是增加了一个水平的页面移位。我使用引导程序4。如何避免这种情况？

感谢您的帮助。

#section2 img {
  float:right;
}

#section2 {
  margin-top:100px;
}

#section2 h2 {
  color: #323232;
  font-size: 70px;
  font-weight: 800;
  float: left;
  line-height: 80px;
  margin-top: 70px;
}

#section2 p{
  color: #494e53;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  float: left;
  margin-top: 30px;
}


.txt2 {
  margin-left: 50px;
}

.bg2{
  background-color: #00a998;
  height: 320px;
  z-index: -5;
    margin-top: -550px;
    margin-left: 100px;
}

<section id="section2">
      <div class="container">
        <div class="row">
          <div class="col-lg-5">
            <img src="https://image.ibb.co/hGq0Rd/111.png" alt="">
          </div>
          <div class="col-lg-7">
            <div class="txt2">
            <h2>Lorem ipsum dolor sit amet, consectetur</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
            
            
          </div>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-12 bg2"></div>
        </div>   
      </div>
    </section>

【问题讨论】：

使用 css 属性作为主体 {overflow-x:hidden}
好吧，你打破了.col-lg-12，给它一个margin-left: 100px;。
@NileshSutar 谢谢！现在一切都很好！

标签： html twitter-bootstrap css bootstrap-4

【解决方案1】：

如果我说得对，问题是你覆盖了col-lg-12 边距，这破坏了它的目的。您应该将您的类 'bg2' 作为 col-lg-12 的子级添加到一个 div 中，并给它一个 position: relative 以将其保留在后台。

https://jsfiddle.net/mu2f0whr/6/

【讨论】：

【解决方案2】：

将overflow: hidden 添加到#section2 会隐藏容器之外的所有内容。

【讨论】：

阅读你的答案让我知道你不知道overflow 是干什么用的。