时间戳

首页 > 解决方案 > 容器外的 DIV

html - 容器外的 DIV

问题描述

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

感谢帮助。

直播：https ://jsfiddle.net/Cedec/mu2f0whr/

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

标签： htmltwitter-bootstrapcssbootstrap-4

解决方案

如果我说对了，问题是你压倒了col-lg-12利润，这打破了它的目的。你应该把你的类'bg2'作为一个孩子的一个div，col-lg-12并给它一个position: relative把它放在后台。

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

推荐阅读