移动端响应式网站横屏模式下布局异常问题求助

问题截图：

横屏加载网站时页面侧边出现空白，结合你提供的代码，给出以下针对性修复方案：

代码问题分析 #

你提供的这段Bootstrap轮播组件代码里，布局类的组合可能导致横向溢出：

<div class="container-fluid">
  <div class="row">
    <div class="col">
      <div id=MyCarousel class="carousel slide" data-ride=carousel style="height:90vh">
        <!--global parent div
            <ol class="carousel-indicators">
                <li data-target="#MyCarousel" data-slide-to="0" class="active">
                </li>
                <li data-target="#MyCarousel" data-slide-to="1">
                    <!--please refer note on div
                                    </li>
                                    </ol>-->
        <div class="carousel-inner">
          <div class="carousel-item active">
            <div class="container">
              <h1>
                <src="https://i.ibb.co/yBhYM5d/white-paper.png" alt="Infographic" width="150" height="150">
              </h1>
              <p> Trusted by a million users</p>
              <a href="#" class="btn btn-outline-success my-2 my-sm-0 custom-btn">
                <!--"btn btn-lg btn-primary"-->
                Request a Demo!
              </a>
            </div>
          </div>
          <div class="carousel-item">
            <!--if you add a new PLEASE create a new Li item-->
            <div class="container">
              <h1><img src="https://i.ibb.co/px0bpy7/white-blood-cell.png" alt="Infographic" width="150" height="150"></h1>
              <p> 20 DeFi instruments</p>
              <a href="#" class="btn btn-outline-success my-2 my-sm-0 custom-btnB">
                <!--"btn btn-lg btn-primary"-->
                Pay for Subscription
              </a>
            </div>
          </div>
        </div>
        <!--carousel inner div-->

具体修复步骤 #

• 清除row的负边距：Bootstrap的row默认带有负左右外边距，会导致容器超出页面宽度，给row添加no-gutters类：

  <div class="row no-gutters">
  

• 替换carousel-item内的container：container类有固定的max-width和左右内边距，在横屏窄屏场景下易引发溢出，换成container-fluid：

  <div class="container-fluid">
  

  或者给现有container添加自定义样式限制宽度：

  .carousel-item .container {
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  

• 确保图片自适应：给轮播内的图片添加自适应样式，避免固定宽高撑大容器：

  .carousel-item img {
    max-width: 100%;
    height: auto;
  }
  

• 强制隐藏横向溢出：如果以上方法仍未解决，给全局body添加样式兜底：

  body {
    overflow-x: hidden;
  }
  

内容的提问来源于stack exchange，提问作者kislay p