如何将 Bootstrap Carousel 指示器图标和箭头控件对齐在同一行？答案

【问题标题】：How can I align Bootstrap Carousel indicator icons and arrow controls on the same line?如何将 Bootstrap Carousel 指示器图标和箭头控件对齐在同一行？
【发布时间】：2022-01-23 17:38:55
【问题描述】：

我使用这个旋转木马并且喜欢它： https://mdbootstrap.com/snippets/jquery/ascensus/135508#html-tab-view

唯一的是，我希望控件围绕指标。

目前是这样的：

                  <            >
   SLIDE               SLIDE              SLIDE
                        ...

我想要什么：

   SLIDE               SLIDE              SLIDE
                 <      ...     >

已经试过了：

<!--Controls-->
<div class="controls-top">
    <a class="btn-floating" href="#multi-item-example" data-slide="prev"><i class="fa fa-chevron-left"></i></a>
    <!--Indicators-->
    <ol class="carousel-indicators">
        <li data-target="#multi-item-example" data-slide-to="0" class="active"></li>
        <li data-target="#multi-item-example" data-slide-to="1"></li>
        <li data-target="#multi-item-example" data-slide-to="2"></li>
    </ol>
    <!--/.Indicators-->
    <a class="btn-floating" href="#multi-item-example" data-slide="next"><i class="fa fa-chevron-right"></i></a>
</div>
<!--/.Controls-->

任何人都知道我如何在没有任何野生 CSS 的情况下使用引导类来实现这一点？

【问题讨论】：

标签： twitter-bootstrap bootstrap-4 mdbootstrap

【解决方案1】：

将轮播的封闭 div 更改为 flex，更改弹性顺序，并管理额外的边距。

代码变成：

<div id="multi-item-example" class="carousel slide carousel-multi-item d-flex align-items-center justify-content-center flex-column" data-ride="carousel">
    <div class="controls-top order-1 d-flex">
        <a class="btn-floating" href="#multi-item-example" data-slide="prev"><i class="fa fa-chevron-left"></i></a>

        <ol class="carousel-indicators my-0 mx-5 position-relative d-flex align-items-center">
            <li data-target="#multi-item-example" data-slide-to="0" class="active m-0 mr-2"></li>
            <li data-target="#multi-item-example" data-slide-to="1" class="m-0 mr-2"></li>
            <li data-target="#multi-item-example" data-slide-to="2" class="m-0 mr-2"></li>
        </ol>

        <a class="btn-floating" href="#multi-item-example" data-slide="next"><i class="fa fa-chevron-right"></i></a>
    </div>

    <div class="carousel-inner" role="listbox">
        // carousel images and stuff
    </div>
</div>

参考这里： Snippet

【讨论】：