如何在容器流体中使用自定义div时修复div重叠(引导带)

Question

我是新的HTML，CSS和引导。当调整屏幕的大小使屏幕变小时，重叠的div出现了问题。当我使用容器流体作为一个部分，并且使用一个定制的div来获得该节的标题时，问题就出现了。我试图更改自定义div的display属性(该节的标题)，但它没有工作。我不知道问题在哪里。我希望你们能暗示我一个解决这个问题的主意。谢谢大家，如果这个问题有点傻的话，我很抱歉。

这是我的HTML：

<div class="home">
  <!--this div contain image on the left and information on the right-->
      <div class="row" id="main">
        <div class="col col-md-5 col-lg-5 col-12 order-1">
            <div class="lefside" id="show-image">
              <img src="images/coronavirus.png" alt="" width="600" height="400"></img>
            </div>
        </div>
        <div class="col col-md-7 col-lg-7 col-12 order-2">
            <div class="information">
              <h1>Stay safe from Corona virus by keeping track of your locations!</h1>
            </div>
        </div>
      </div>
  </div>

  <div class="container-fluid" id="about">
      <div class="intro">
        <h1>What is this website about?</h1>
      </div>
      <div class="row function">
        <div class="col col-md-5 col-lg-5 col-12 order-1">
          <img src="images/community.png" alt="" style="width: 80%; height: 80%"></img>
        </div>
        <div class="col col-md-7 col-lg-7 col-12 order-2">
            <h2 style="text-align:center">Our mission</h2>
            <div class="mission">
              <p>The COVID-19 pandemic, also known as the coronavirus pandemic, is an ongoing global pandemic of coronavirus disease 2019 (COVID-19) caused by severe acute respiratory syndrome coronavirus 2 (SARS-CoV-2). The virus was first identified in December 2019 in Wuhan, China.
              <br>
              <br>
              We created this website to help you to keep track of visited location. You can see
              the current hotspots in the map to avoid the areas that are dangerous. Furthermore,
              you can keep track of the visited locations by entering the longitude and latitude
              of the location, therefore, you can check whether you have been to a hotspot!
              <br>
              <br>
              <span style="font-weight: bold">
                SIGN UP AND JOIN WITH US TO PROTECT THE COMMUNITY!
              </span>
              </p>
            </div>
        </div>
      </div>
  </div>

  <div class="container-fluid" id="guideline">
      <div class="intro">
        <h1>How to use this website</h1>
      </div>
      <div class="row function">
          <div class="col col-md-3 col-lg-3 col-12 order-1">
              <div style="width: 100%; height: 50%">
                  <img src="images/login.png" alt="" style="width: 100%; height: 100%"></img>
              </div>
              <div class="guideline_text">
                <p>Log in by your account</p>
              </div>
          </div>
          <div class="col col-md-3 col-lg-3 col-12 order-2">
              <div style="width: 100%; height: 50%">
                  <img src="images/checkin.png" alt="" style="width: 100%; height: 100%"></img>
              </div>
              <div class="guideline_text">
                <p>Check-in locations by entering longitude and latitude</p>
              </div>
          </div>
          <div class="col col-md-3 col-lg-3 col-12 order-3">
              <div style="width: 100%; height: 50%">
                  <img src="images/seemap.png" alt="" style="width: 100%; height: 100%"></img>
              </div>
              <div class="guideline_text">
                <p>See your locations in the map with hotspots</p>
              </div>
          </div>
          <div class="col col-md-3 col-lg-3 col-12 order-4">
              <div style="width: 100%; height: 50%">
                  <img src="images/alert.jpg" alt="" style="width: 100%; height: 100%"></img>
              </div>
              <div class="guideline_text">
                <p>Check if you have been to a hotspot</p>
              </div>
          </div>
      </div>
  </div>

这是我的CSS：

.home{
  height: 500px;
  width: 100%;
}

#main{
  width: 100%;
  height: 100%;
}

#show-image{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center ;
}

.information{
  width: 100%;
  height: 30%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#about{
  height: 630px;
  margin-top: 50px;
  margin-bottom: 50px;
  padding-top: 10px;
  padding-bottom: 10px;

}
#guideline{
  height: 500px;
  margin-top: 50px;
  margin-bottom: 50px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.intro{
  height: 63px;
  margin-bottom: 30px;
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center ;
  background: grey;
}

.function{
  width: 100%;
  height: 90%;
  padding-left: 50px;
  padding-right: 50px;
}

.mission{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  padding-top: 30px;
  align-items: left;
  text-align: left;
  font-size: 20px;
}

.guideline_text{
  width: 100%;
  height: 50%;
  padding-top: 50px;
  word-wrap: break-word;
  font-size: 20px;
  text-align: center;
}

当调整大小到较小的屏幕时，容器相互重叠。再次感谢大家的帮助。

Answer 1

您的解决方案是几乎每次在CSS中手动设置高度属性时都删除。如果可以避免，我建议永远不要这样做，特别是对于只包含文本的div。

我希望我能给出一个更学术的答案，但我没有这样做的经验。

如果您仍然希望设置高度属性，您可以阅读更多关于设置高度属性的这里。