html - 当设备尺寸较小时，<Div> 部分将不会保持包含状态

Question

当我的网页的屏幕尺寸在平板电脑/移动设备上时，顶部的 div 溢出它的空间并与屏幕的另一部分重叠。我正在使用 Bootstrap 网格，所以也许我没有正确使用它们？任何帮助都是救命稻草。

1st Screenshot showing correct placing on a desktop PC

2nd Screenshot showing incorrect placement on an iPhone

    <div class="container mt-5">
    <div class="row no gutters header text-left mt-5">
        <div class="col-sm-12">
            <h1 id="testing-1" class="display-4 text-left">Digital Study Skills Tutor</h1>
            <p class="lead">Free self-help study skills resources for university students</p>
            <a class="btn btn-lg btn-primary" href="signup.php">Sign Up</a>
        </div>  
    </div>
</div>



    .site-header {
  background: url(img/home-header.jpg) no-repeat center;
  background-size: cover;
        }

.site-header .layout-hero {
  min-height: 100vh;
}

    .display-4 {
  font-size: 2.25em;
  font-weight: 500;
  color: white;
}

Answer 1

我无法创建此场景，但我会试一试。您需要使用媒体查询来重新设置页面上组件的样式，以便文本和按钮不会在下一个 div 中溢出。您可能需要缩小字体并缩小按钮的尺寸以适应小屏幕尺寸。在下面的媒体查询中继续调整字体大小和按钮尺寸以获得所需的结果。媒体查询用于为不同的屏幕尺寸重新定义样式。这是为响应式网页设计设计页面样式的好方法。 Media Query

较小屏幕的媒体查询示例:

@media (max-width:576px) {
  .testing-1 {
        font-size:x;
    }
   .lead {
        font-size: y;
    }
    .btn-lg .btn-primary {
        width: z;
    }
}