HTML、CSS 和 Bootstrap 内容重叠

编程问答 2022-05-25

问题描述

输出

enter image description here

我一直在一个带有 bootstrap carousel 的小网站上工作，在这个特定的程序段中，bootstrap 和 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,<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,<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 的边距值，那么它就会对齐，这是一种正确的方法吗？是否有任何解决方案将这些内容一一对齐而不给出固定边距？如果你能帮我解决问题，请分享

解决方法

.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,<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,<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>

bootstrap-4carouselhtml