Bootstrap 旋转木马跳动，无法使用 HTML 和 CSS 对其进行编辑 - O/P 包含 gif

Question

不正确的输出：

如果你敏锐地看到当旋转木马从杏仁 2 移动到杏仁 3 时发生了这个小跳跃，我试图以所有方式移除但我无法移除它。为了显示输出，我附上了 pencode link。你可以在这里看到结果 https://codepen.io/gladwin-james/pen/oNYWJxL 并且还上传了上面的 GIF 以进行清晰的解释。我还分享了我在 pencode

中分享的相同代码

HTML

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

CSS

body {
  overflow-x:hidden;
}
.centering_the_slider_contents {
  margin-top: 10px;
  padding-top: 25px;
  width: 100%;
  padding-bottom: -25px;
  text-align: center;
  margin-top: 15px auto;
  background: #ebebeb;
  display: flex;
 
}

.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;
// }

.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";
}

如果你能帮我解决这个问题，我无法解决这个问题，这真的很有帮助。

。通过添加padding-top 15px；我正在尝试获得这个小间距

Answer 1

您的参数有冲突：

两个不同间距的顶部边距和一个自动功能（不需要这个）；
padding-top 与两个外边距冲突；

我修改了你的代码，非常完美

这是Codepen.io代码

body {
  overflow-x: hidden;
}

.centering_the_slider_contents {
  margin-top: 10px;
  width: 100%;
  padding-bottom: -25px;
  text-align: center;
  margin-top: 15px auto;
  background: #ebebeb;
  display: flex;
}

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

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

// .last_contact_us {
//   background: #ffffff !important;
// }
.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="https://static.toiimg.com/thumb/79284525.cms?width=680&height=512&imgsize=134959" />
        </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="https://static.toiimg.com/thumb/79284525.cms?width=680&height=512&imgsize=134959" />
        </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="https://static.toiimg.com/thumb/79284525.cms?width=680&height=512&imgsize=134959" />
        </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>

Answer 2

body {
  overflow-x:hidden;
}

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

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

.carousel-item
{
margin:20px 0px;

}

.centering_the_slider_contents {
  width: 100%;
  text-align: center;
  background: #ebebeb;
  display: flex;
 }

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

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

// .last_contact_us {
//   background: #ffffff !important;
// }

.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"
    />
<div class="about_nuts_main" id="section_about_nuts_main">
    <p class="about_nuts">About Nuts</p>
    <p class="our_services_expl">
        Dont Feel Shy Choose your Favourite Nut and get to know <br/>
        what's inside about it
    </p>
</div>
<!-- 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>

从 .centering_the_slider_contents 中删除 padding-top 以修复弹跳并在 .carousel-item 上添加顶部+底部边距space.

Bootstrap 旋转木马跳动，无法使用 HTML 和 CSS 对其进行编辑 - O/P 包含 gif

Bootstrap Carousel bounces, unable to edit it with HTML and CSS - O/P gif included

html

css

carousel

bootstrap-4