如何创建自定义大小的响应式轮播 Bootstrap？

Question

我是网络开发的新手，我想在我网站右侧的导航栏下方创建一个自定义大小的轮播，就像它在一个部分中一样，但我不知道如何以及在哪里创建开始。我在很多论坛中搜索过，但没有我想要的。如果可能的话，请有人指导我一些线索。我很感激。谢谢。

Answer 1

如果没有看到网站的当前代码和结构，很难推荐解决问题的方法，但是 bootstrap 网站有很好的文档和示例，您几乎可以使用它的所有元素：

得到bootstrap.com/docs/4.5/components/carousel

似乎轮播在元素本身上没有任何类型的自定义大小选项，但也许您可以放置某种卡片组，然后将轮播嵌套在其中？

带有嵌套轮播的卡片示例：

<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
    <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
        <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
</div>
<a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

然后您可以将样式应用于卡片或轮播以调整大小。

如何创建自定义大小的响应式轮播 Bootstrap？

How to Create a Custom sized Responsive Carousel Bootstrap?

carousel

bootstrap-4