如何更改引导转盘控件链接的大小？

Question

默认引导轮播控件(左箭头和右箭头)具有跨越轮播中图像高度的100%的链接。我很抱歉，因为这可能是一个愚蠢的问题，但你如何改变这一点，使链接只超过箭头本身的宽度和高度？

您可以在Boostrap文档(https://getbootstrap.com/docs/3.3/javascript/#carousel)上的" carousel“下看到我所指的示例，旋转木马的代码如下所示。

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Answer 1

使用'carousel-control‘添加一个类，然后添加以下CSS。或者您可以直接将此CSS添加到您的代码中

#carousel-example-generic a.carousel-control {
height: 26%;
top: 33%;
width: 86px;
background: black;
//add your own CSS as you need
}

Answer 2

同时添加.carousel-control.left和.carousel-control.right，

//change the margin to make the width and height more longer or shorter
   margin: 100px 0;
//change the radius to make the point of the squared-hover looks rounded
   border-radius: 60px;

Answer 3

我在谷歌上搜索了一下，找到了我自己的解决方案，所以我添加了Bootstrap 4.x的解决方案，这样其他人就可以找到这个简单的解决方案。由于图标是SVG，因此同时调整高度和宽度将更改图标的大小。我曾假设如果我增加宽度，它们会改变大小，但事实并非如此。我使用了vw，所以它们可以随着屏幕缩放，但你可以使用任何你想要的单位。

.carousel-control-next-icon,
.carousel-control-prev-icon {
  width: 5vw;
  height: 5vw;
}