Bootstrap 将图像放在引导转盘的右下角

eit6fx6z 于 2023-03-27 发布在 Bootstrap

关注(0)|答案(1)|浏览(166)

我正试图添加一个（或两个）小图像指示器的右下角部分的引导轮播。

我知道你可以在旋转木马中添加文本，但我不知道如何添加图像并将其放置在右下角。

<div id="carouselExampleControls" class="carousel slide card-img-top" data-bs-ride="carousel" data-bs-interval="false">
<div class="carousel-inner">
    <div class="carousel-item active">
        <img src="https://placehold.co/220x180?text=Img+1" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
        <img src="https://placehold.co/220x180?text=2" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
        <img src="https://placehold.co/220x180?text=3" class="d-block w-100" alt="...">
    </div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
</button>

twitter-bootstrap

来源：https://stackoverflow.com/questions/75843377/place-image-to-bottom-right-in-bootstrap-carousel

1条答案

按热度按时间

juzqafwq1#

您可以通过在.carousel中添加img并使用position utility classes来实现这一点。
如下所示：

<img class="border border-success position-absolute bottom-0 end-0 m-5" src="https://placehold.co/50?text=Img+sm">

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">

<div id="carouselExampleControls" class="carousel slide card-img-top" data-bs-ride="carousel" data-bs-interval="4000">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://placehold.co/220x180?text=Img+1" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="https://placehold.co/220x180?text=2" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="https://placehold.co/220x180?text=3" class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
  <img class="border border-success position-absolute bottom-0 end-0 m-5" src="https://placehold.co/50?text=Img+sm">

</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/js/bootstrap.bundle.min.js" integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N" crossorigin="anonymous"></script>

赞(0）回复(0）举报 2023-03-27

我来回答

Bootstrap 将图像放在引导转盘的右下角

1条答案

相关问题

热门标签

最新问答