Bootstrap 輪播箭頭定位

Question

我在這件事上摸不着頭腦。 目前，我的箭頭放在旋轉木馬的瓷磚外面。 見下文：

如何向下移動箭頭，使它們像下面一樣位於左右指示器的外側而不重疊？

此 Web 應用程序根據用戶登錄的內容填充不同的磁貼，因此根據每個用戶填充的輪播指示器的數量來調整箭頭非常重要。

HTML

<div id="{{ game_group }}-game-carousel" class="carousel slide">
<div class="test">
<div class="carousel-indicator-wrapper">

    <ol class="carousel-indicators">
        {% for obj in game_data %}
            <li data-target="#{{ game_group }}-game-carousel" data-slide-to="{{ forloop.counter0 }}" class="{% if forloop.counter == 1 %}active{% endif %}"></li>
            {% if game_group != "NS" and forloop.last %}
                <li data-target="#{{ game_group }}-game-carousel" data-slide-to="{{ forloop.counter0 | add:"1" }}"></li>
            {% endif %}
        {% endfor %}
    </ol>

</div>
<a class="carousel-control left" href="#{{ game_group }}-game-carousel" data-slide="prev"><i class="icon-chevron-left" aria-hidden="true"></i></a>
<a class="carousel-control right" href="#{{ game_group }}-game-carousel" data-slide="next"><i class="icon-chevron-right" aria-hidden="true"></i></a>
</div>
</div>

CSS

#SL-game-carousel, #CL-game-carousel{
height: 425px;
margin-bottom:0px;
border:0px solid red;
}

#NS-game-carousel{
height:180px;
margin-bottom:0px;
border:0px solid red;
}

.carousel-indicator-wrapper{
  position:absolute;
  top:160px;
  z-index: 5;
  width:100%;
}

#lobby-tab-content .carousel-indicator-wrapper{
  top: 362px;
}

.carousel-indicators {
  position:relative;
  padding:0;
  /*use this display this to center the indicators horizontally*/
  display:table;
  margin:0 auto;
  top: 0px;
}

.carousel-indicators li {
background-color: rgba(223, 223, 223, 0.40);
border-radius: 5px;
height: 10px;
margin-left: 2px;
margin-right: 2px;
width: 10px;
cursor: pointer;
}

.carousel-indicators .active {
  background: rgb(255,255,255);
}

.test {
text-align: center;
}

.slot-carousel {
  width:640px;
  height:345px;
  /*background-color:rgba(255,0,0,.3);*/
  margin: 0 auto;
}

#NS-game-carousel .slot-carousel {
height:180px;
}

#lobby-tab-content #SL-game-carousel .carousel-control, #NS-game-carousel                 
.carousel-control, #CL-game-carousel .carousel-control {
  margin: /*178px 0px 0px 270px*/; 
  border-radius: 0;
  background-color:transparent;
  color: #dfdfdf;
  font-size: 38px;
  height: 40px;
  width: 40px;
  opacity: 1;
  filter: alpha(enabled='false');
  border:0;
  text-decoration: none;
}

#lobby-tab-content #SL-game-carousel .carousel-control.right, #NS-game-carousel .carousel-control.right, #CL-game-carousel .carousel-control.right {
  margin: /*178px 299px 0px 0px*/;
}

.icon-chevron-left:hover {
    color: #d8d8d8 /*#cbcbcb*/;
}
.icon-chevron-right:hover {
    color: #d8d8d8 /*#cbcbcb*/;
}

#game-lobby #NS-game-carousel .carousel-control{
  margin-top:-27px;
}

#game-lobby #NS-game-carousel .carousel-control.right{
  margin-top:-24px;
}

.carousel-control.left {
    background-image: none !important;/*url('/static/images/arrow-left.png');*/
    background-position: 0px 0px;
    background-repeat: no-repeat;
}

.carousel-control.right {
    left: auto;
    right: 15px;
    background-image: none !important; /*url('/static/images/arrow-right.png')*/
    background-position:0px 0px;
    background-repeat:no-repeat;
}

任何幫助都將不勝感激。 謝謝！

Answer 1

嘗試這個：

.carousel-control {
    width: 30%;/*put your desired width*/
    margin-top: 150px;/*put your desired top margin*/
}

Answer 2

這會將箭頭放在同一行，bootstrap version-4.4

    <div class="col-md-8 h-100">
      <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
          <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
          <li data-target="#carouselExampleCaptions" data-slide-to="1" class=""></li>
          <li data-target="#carouselExampleCaptions" data-slide-to="2" class=""></li>
          <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </ol>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img class="d-block w-100 img-carousel" alt="First slide [800x400]"
              src="{{ static_url('assets/img/1.svg')}}" data-holder-rendered="true">
            <div class="carousel-caption d-none d-md-block text-dark">
              <h5>What is lol?</h5>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Nulla vitae elit libero, a pharetra augue mollis interdum.
              </p>
            </div>
          </div>
          <div class="carousel-item">
            <img class="d-block w-100 img-carousel" alt="Second slide [800x400]"
              src="{{ static_url('assets/img/2.svg')}}">
            <div class="carousel-caption d-none d-md-block text-dark">
              <h5>Second slide label</h5>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
          </div>
          <div class="carousel-item">
            <img class="d-block w-100 img-carousel" alt="Third slide [800x400]" data-holder-rendered="true"
              src="{{ static_url('assets/img/3.svg')}}">
            <div class="carousel-caption d-none d-md-block text-dark">
              <h5>Third slide label</h5>
              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
            </div>
          </div>
        </div>
        <!-- <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a> -->
      </div>
    </div>

Answer 3

有一個簡單的方法可以解決這個問題。 從“carousel-control-next”和“carousel-control-prev”類中刪除“carousel”。 這些類是 Bootstrap 使用其 SCSS 定位的目標。 您現在可以定位箭頭新類，“control-prev”和“control-next”。

將父 div 的位置設置為“相對”，將控件設置為“絕對”，您可以根據父 div 將它們放置在您想要的任何位置。 希望這可以幫助！

Answer 4

嘗試為輪播箭頭的類添加邊距，如下所示 -

.carousel-control.left {
    margin-right: 15px;
}
.carousel-control.right {
    margin-left: 15px;
}

Answer 5

嘗試在CSS中添加/更新top:90%以降低它們

    .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right, .carousel-control .icon-next, .carousel-control .icon-prev {
    position: absolute;
    top: 90%;
}

然后減少/增加.carousel-control的寬度

.carousel-control {
    width: 66%;
}

希望這可以幫助