html - HTML、CSS 和 Bootstrap 内容重叠

Question

输出

我一直在一个带有引导轮播的小网站上工作，在这个特定的程序段中，引导程序和 HTML，CSS 默认情况下会重叠，不知道如何将它们分开我附上了下面的代码，我还分享了一个 codepen 链接https ://codepen.io/gladwin-james/pen/RwoVQjv用于实时输出

HTML

<div id="myCarousel" class="carousel slide" data-ride="carousel">
      <div class="slider">
        <div class="centering_the_slider_contents">
          <!-- Nut 1-->
          <div class="carousel-item active">
            <figure class="images_in_nuts">
              <img src="images/almonds.jpg" />
            </figure>
            <div class="nut_text">
              <h2>Almond</h2>
              <h3 class="rich_in">Rich In</h3>
              <p>
                Vitamin E, Monounsaturated fats, Fiber, Biotin, <br />Calcium,
                Phosphorus, Magnesium, Copper, <br />
                Phytonutrients, specifically flavonoids, plant sterols,<br />
                phenolic acids
              </p>
            </div>
          </div>
          <!-- Nut 1 Ends-->
          <!-- Nut 2-->
          <div class="carousel-item">
            <figure class="images_in_nuts">
              <img src="images/almonds.jpg" />
            </figure>
            <div class="nut_text">
              <h2>Almond 2</h2>
              <h3 class="rich_in">Rich In</h3>
              <p>
                Vitamin E, Monounsaturated fats, Fiber, Biotin, <br />Calcium,
                Phosphorus, Magnesium, Copper, <br />
                Phytonutrients, specifically flavonoids, plant sterols,<br />
                phenolic acids
              </p>
            </div>
          </div>
          <!-- Nut 2 Ends-->
          <!-- Nut 3-->
          <div class="carousel-item">
            <figure class="images_in_nuts">
              <img src="images/almonds.jpg" />
            </figure>
            <div class="nut_text">
              <h2>Almond 3</h2>
              <h3 class="rich_in">Rich In</h3>
              <p>
                Vitamin E, Monounsaturated fats, Fiber, Biotin, <br />Calcium,
                Phosphorus, Magnesium, Copper, <br />
                Phytonutrients, specifically flavonoids, plant sterols,<br />
                phenolic acids
              </p>
            </div>
          </div>
          <!-- Nut 3 Ends-->
        </div>
      </div>
      <script
      src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
      integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
      integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
      integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
      crossorigin="anonymous"
    ></script>
    </div>
  </div>
</div>
</div>
    
    <!-- Everything Related to nuts ends here - Slider Ends-->
  
    <div class="last_contact_us" id="last_contact_us">
      <p class="footer_contact_us">Contact Us</p>
      <p class="footer_contact_us_expl">
        Call us to get Nuts and Spices at a best quality <br />
        and also at a best price
      </p>
    </div>

CSS

.centering_the_slider_contents {
  margin: auto;
  width: 100%;
  text-align: center;
  margin-top: 10px;
  position: absolute;
}

.images_in_nuts {
  border-radius: 50%;
  width: 250px;
  height: 250px;
  display: inline-block;
}

.nut_text {
  display: inline-block;
  vertical-align: top;
  margin-top: 30px;
}

.last_contact_us {
  background: #ffffff !important;
  // margin-top: 300px;
}

.footer_contact_us  {
  margin-top: 10px;
  text-align: center;
  font-size: 25px;
  font-family: "Poppins";
  font-weight: bold;
}

.footer_contact_us_expl {
  text-align: center;
  font-family: "Poppins";
}

如果给出 300px 的边距值，那么它会对齐，这是一种正确的方法吗？是否有任何解决方案在不给出固定边距的情况下将这些内容一低于一对齐？如果您能帮助我解决问题，请分享

标签： htmlcssbootstrap-4carousel

Answer 1

.centering_the_slider_contents {
      margin: auto;
      width: 100%;
      text-align: center;
      margin-top: 10px auto;

     /* position: absolute;*/
    }

    .images_in_nuts {
      border-radius: 50%;
      width: 250px;
      height: 250px;
      display: inline-block;
    }

    .nut_text {
      display: inline-block;
      vertical-align: top;
      margin-top: 30px;
    }

    .last_contact_us {
      background: #ffffff !important;
      // margin-top: 300px;
    }

    .footer_contact_us  {
      margin-top: 10px;
      text-align: center;
      font-size: 25px;
      font-family: "Poppins";
      font-weight: bold;
    }

    .footer_contact_us_expl {
      text-align: center;
      font-family: "Poppins";
    }

<link
          rel="stylesheet"
          href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
          crossorigin="anonymous"
        />

    <!-- About nuts - Slider-->
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
          <div class="slider">
            <div class="centering_the_slider_contents">
              <!-- Nut 1-->
              <div class="carousel-item active">
                <figure class="images_in_nuts">
                  <img src="images/almonds.jpg" />
                </figure>
                <div class="nut_text">
                  <h2>Almond</h2>
                  <h3 class="rich_in">Rich In</h3>
                  <p>
                    Vitamin E, Monounsaturated fats, Fiber, Biotin, <br />Calcium,
                    Phosphorus, Magnesium, Copper, <br />
                    Phytonutrients, specifically flavonoids, plant sterols,<br />
                    phenolic acids
                  </p>
                </div>
              </div>
              <!-- Nut 1 Ends-->
              <!-- Nut 2-->
              <div class="carousel-item">
                <figure class="images_in_nuts">
                  <img src="images/almonds.jpg" />
                </figure>
                <div class="nut_text">
                  <h2>Almond 2</h2>
                  <h3 class="rich_in">Rich In</h3>
                  <p>
                    Vitamin E, Monounsaturated fats, Fiber, Biotin, <br />Calcium,
                    Phosphorus, Magnesium, Copper, <br />
                    Phytonutrients, specifically flavonoids, plant sterols,<br />
                    phenolic acids
                  </p>
                </div>
              </div>
              <!-- Nut 2 Ends-->
              <!-- Nut 3-->
              <div class="carousel-item">
                <figure class="images_in_nuts">
                  <img src="images/almonds.jpg" />
                </figure>
                <div class="nut_text">
                  <h2>Almond 3</h2>
                  <h3 class="rich_in">Rich In</h3>
                  <p>
                    Vitamin E, Monounsaturated fats, Fiber, Biotin, <br />Calcium,
                    Phosphorus, Magnesium, Copper, <br />
                    Phytonutrients, specifically flavonoids, plant sterols,<br />
                    phenolic acids
                  </p>
                </div>
              </div>
              <!-- Nut 3 Ends-->
            </div>
          </div>
          <script
          src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
          integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
          crossorigin="anonymous"
        ></script>
        <script
          src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
          integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
          crossorigin="anonymous"
        ></script>
        <script
          src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
          integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
          crossorigin="anonymous"
        ></script>
        </div>
      </div>
    </div>
    </div>
        
        <!-- Everything Related to nuts ends here - Slider Ends-->
      
        <div class="last_contact_us" id="last_contact_us">
          <p class="footer_contact_us">Contact Us</p>
          <p class="footer_contact_us_expl">
            Call us to get Nuts and Spices at a best quality <br />
            and also at a best price
          </p>
        </div>
    <script
          src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
          integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
          crossorigin="anonymous"
        ></script>
        <script
          src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
          integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
          crossorigin="anonymous"
        ></script>
        <script
          src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
          integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
          crossorigin="anonymous"
        ></script>