你如何改变引导轮播控制链接的大小？

Posted 2023-03-06

【中文标题】你如何改变引导轮播控制链接的大小？

【英文标题】：How do you change the size of bootstrap carousel control links?

【发布时间】：2018-02-25 16:34:14

【问题描述】：

默认引导轮播控件（左右箭头）具有跨越轮播中图像高度 100% 的链接。我很抱歉，因为这可能是一个愚蠢的问题，但是您如何更改此设置以使链接仅超出箭头本身的宽度和高度？

您可以在 Boostrap 文档 (https://getbootstrap.com/docs/3.3/javascript/#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="..." >
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." >
      <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>

【问题讨论】：

' 链接仅超出箭头本身的宽度和高度' 你是什么意思？

您可以编辑 carousel-control 类的 css 以更改其大小。向 .carousel-control 类添加高度属性。

O，如果您在谈论实际的 glyphicon 图标大小，您可以在实际图标中添加一个类以更改其大小，就像在这个问题中一样：***.com/questions/18478365/bigger-glyphicons

查看 Jake Wilson 的回答 ***.com/questions/28678542/…

@Gagantous 不，例如，如果您查看我发布的链接中的轮播并将鼠标悬停在图像的右上角，您会看到该链接一直延伸到旋转木马的顶部...不仅仅是箭头本身。

【参考方案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

【参考方案2】：

我在 Google 搜索后最终来到这里，这是我自己想出来的，所以我添加了 Bootstrap 4.x 的解决方案，以便其他人可以找到这个简单的解决方案。 由于图标是 SVG，调整高度和宽度都会改变图标的​​大小。我曾假设如果我增加宽度，它们会改变尺寸，但事实并非如此。 我使用了vw，所以它们会随着屏幕缩放，但你可以使用任何你想要的单位。

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

【参考方案3】：

同时添加.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;

【参考方案4】：

添加 max-height 和 margin-top css 值

<a style=" max-height:21%; margin-top:21%; " .....

直观地查看更改（在第一个 <span> 中添加 aria-hidden="false" 并在 <a> 中添加 background-color:blue;）

// 注意我在 bootstrap 4 中试过这个，不确定 3