HTML、CSS 和 Bootstrap 内容重叠

Question

OutPut

我一直在一个带有 bootstrap 轮播的小型网站上工作，在这个特定的程序段中，bootstrap 和 HTML、CSS 默认重叠不确定如何将它们分开我附上了下面的代码，我还共享了一个代码笔 link 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";
}

如果给定 300 像素的边距值，那么它会对齐，这是正确的做法吗？是否有任何解决方案将这些内容一个接一个地对齐而不给出固定边距？如果您能帮我解决问题，请分享

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>

HTML、CSS 和 Bootstrap 内容重叠

HTML, CSS and Bootstrap contents are overlapping

html

css

carousel

bootstrap-4