Bootstrap Carousel-将“下一步”和“上一步”按钮放在右上角，并且彼此靠近

问题描述

我正在使用Bootstrap 4轮播。我试图将next和prev按钮的位置更改为右上角，但彼此靠近。我已经做到了，但是我认为我的CSS代码有误，因为当我最小化屏幕时，我看不到按钮。

HTML代码

<div id="featured" class="carousel slide" data-ride="carousel">
  <!-- The slideshow -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="one.jpg">
    </div>
    <div class="carousel-item">
      <img src="two.jpg" >
    </div>
    <div class="carousel-item">
      <img src="three.jpg" >
    </div>
  </div>
  <!-- Left and right controls -->
 <a class="carousel-control-prev" href="#featured" data-slide="prev">
   <span class="fa fa-arrow-circle-left fa-2x" style="color:green"></span>
  </a>
  <a class="carousel-control-next" href="#featured" data-slide="next">
   <span class="fa fa-arrow-circle-right fa-2x" style="color:green"></span>
  </a>
</div>

我的CSS代码

.carousel-control-prev,.carousel-control-next{
  width:20px;
  height: 20px;
  background-color: none;
  top:calc(-20% -25%);
  opacity:.8;
}
.carousel-control-prev{
 left:1090px !important;
}

解决方法

一旦用户的视口接近或小于left:1090px !important，

1090px就会引起问题。回想起来，您应该能够知道原因-因为它是从1090px向左推动它。

做类似的事情

.carousel-control-prev{
  left: unset;
  right: 30px;
}

相反，由于您将其定位在右上方，因此您可以从right对其进行控制

$('.carousel').carousel()

.carousel {
  background: black;
}

.carousel .carousel-control-prev,.carousel .carousel-control-next {
  width: 20px;
  height: 20px;
  background-color: none;
  top: calc(-20% -25%);
  opacity: .8;
}

.carousel .carousel-control-prev {
  left: unset;
  right: 30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<div id="featured" class="carousel slide" data-ride="carousel">
  <!-- The slideshow -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://via.placeholder.com/650x200">
    </div>
    <div class="carousel-item">
      <img src="https://via.placeholder.com/651x200">
    </div>
    <div class="carousel-item">
      <img src="https://via.placeholder.com/652x200">
    </div>
  </div>
  <!-- Left and right controls -->
  <a class="carousel-control-prev" href="#featured" data-slide="prev">
    <!--<span class="fa fa-arrow-circle-left fa-2x" style="color:green"></span>-->
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#featured" data-slide="next">
    <!--<span class="fa fa-arrow-circle-right fa-2x" style="color:green"></span>-->
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>