Bootstrap4网页中小屏响应式适配：文本隐藏与间距调整

需求1：中等及更小尺寸屏幕下隐藏“Lorem Ipsum”文本 #

• 现有代码中，该文本所在<p>标签的显示类为d-none d-md-block。按照Bootstrap 4 官方响应式规则，类名中的断点前缀代表“视口宽度达到该阈值及以上时，类规则生效”。md断点的阈值为视口宽度≥768px，也就是说当前配置下中等屏幕时该文本仍会正常显示，不符合隐藏要求。
• 调整方式：将该标签的类从d-none d-md-block修改为d-none d-lg-block。调整后规则变为：全尺寸屏幕默认隐藏，仅当视口宽度≥992px（大尺寸桌面屏幕）时显示，自然实现中等屏幕（768px~991px）、小屏幕（<768px）下的隐藏效果。

需求2：小尺寸屏幕下“Carlos Qiano”文本上下间距均等 #

• 现有布局中，该文本所在标签写死了margin-top: 35px的上边距，搭配固定522px高度的.jumbotron容器，且容器内内容默认靠顶部对齐，导致小屏幕下文字离容器顶部过近、离底部留白过多，上下间距失衡。
• 调整方式：
  • 修改.jumbotron的CSS样式，开启Flex垂直布局，让内部内容在容器内垂直居中对齐，移除写死的固定高度限制，替换为最小高度保证大尺寸下的展示效果：

    .jumbotron {
      background-image: url("background1.jpg");
      text-align: center;
      min-height: 522px; /* 替换原代码中写死的 height:522px */
      background-size: cover;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    

  • 移除Carlos Qiano标签上写死的内联margin-top: 35px，将原有大间距类调整为响应式间距，避免小屏幕下留白过大：把原来的mb-5 pb-5调整为mb-md-5 mb-3 pb-md-5 pb-3，保证中等及以上屏幕的原有间距不变，小屏幕下适当缩减小间距。
  • 补充小屏幕下的字号适配：将写死的font: 120px调整为响应式字号，避免小屏幕下文字溢出，新增媒体查询规则：

    @media (max-width: 767px) {
      .hero-title {
        font-size: 15vw !important;
        font-family: Verdana,sans-serif;
      }
    }
    

    给Carlos Qiano的标签加上hero-title类即可。

调整后完整可运行代码 #

<!DOCTYPE html>
<html>
   <head>
       <title>Background Image</title>
       <meta charset="utf-8"></meta>
       <meta name="viewport" content="width=device-width, initial-scale=1" ></meta>
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
       <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
   </head>

   <style type="text/css">
    .jumbotron {
      background-image: url("background1.jpg");
      text-align: center;
      min-height: 522px;
      background-size: cover;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    @media (max-width: 767px) {
      .hero-title {
        font-size: 15vw !important;
        font-family: Verdana,sans-serif;
      }
    }
   </style>

   <body>                 
    <section id="page-top">
            <div class="jumbotron">
              <p data-aos="zoom-out" data-aos-delay="500" style="color: black; animation-duration: 2s; animation-iteration-count:infinite; animation-delay: 1s;" class="lead pulse mb-md-5 mb-3 green pb-md-5 pb-3 aos-init aos-animate hero-title">Carlos Qiano</p>
              <p data-aos="zoom-out" data-aos-delay="500" style="font: 20px Georgia,serif;font-style:italic; line-height: 1.6; color:black;animation-duration:2s;animation-iteration-count:infinite; animation-delay:1s;" class="lead pulse mb-5 lightGreen pb-5 aos-init aos-animate d-none d-lg-block">Lorem Ipsum.<br>Lorem Ipsum.</p>
            </div>
        </section>
   </body>
</html>

内容的提问来源于stack exchange，提问作者Mx.