将元素推出流而不使用引导程序进行水平滚动

Question

我最近一直在使用引导框架。我是这个框架的新手。

所以我试图在着陆页中的某些文本旁边放置一张图片。我使用引导程序的网格系统并且它可以工作。但是当我使用position: absolute 和left:somePX 推送图像时，它会进行水平滚动并离开页面主体。我应该怎么做才能防止这种滚动。我只想剪切图像并根据需要定位它。

注意：我已经应用了这么多模板，只使用 CSS 而没有引导程序，但我从来没有遇到过同样的问题。

谢谢

这是我的 html 代码：

/* landing */


/*this is the image style*/

.landing {
  padding-bottom: 100px;
  margin-right: 0;
}

.landing .right .image {
  position: relative;
}

.landing .right .image .back img {
  position: absolute;
  left: 100px;
}

.landing .right .image .mockups {
  position: absolute;
  top: -100px;
  left: 100px;
}


/*this is text style I don't think the problem is here but I put it*/

.landing .left {
  padding-top: 80px;
  padding-left: 80px;
}

.landing .left h1 {
  line-height: 1.3;
  margin-bottom: 20px;
}

.landing .left p {
  font-size: 15px;
  margin-bottom: 20px;
}

.landing .left button {}

<div class="landing row">
  <div class="col-md-6 left">
    <div class="container">
      <h1>Next generation digital banking</h1>
      <p>Take your financial life online. Your Easybank account<br> will be a one-stop-shop for spending, saving,<br> budgeting, investing, and much more.</p>
      <button class="btn linear" type="button">Request Invite</button>
    </div>
  </div>

  <div class="col-md-6 right">
    <div class="image">
      <div class="back">
        <img class="back-image img-fluid" src="images\bg-intro-desktop.svg" alt="">
      </div>
      <div class="front">
        <img class="img-fluid mockups" src="images\image-mockups.png" alt="">
      </div>
    </div>
  </div>
</div>

Answer 1

你可以简单地添加到你的身体：

<style>
     body{
          overflow-x: hidden;
        }
</style>