如何将 Bootstrap 轮播指示器图标和箭头控件对齐在同一行上?
How can I align Bootstrap Carousel indicator icons and arrow controls on the same line?
我使用这个轮播并喜欢它:
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-->
任何人都知道我如何使用 bootstrap 类 实现这一点而没有任何野性 css?
将旋转木马的封闭 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
我使用这个轮播并喜欢它: 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-->
任何人都知道我如何使用 bootstrap 类 实现这一点而没有任何野性 css?
将旋转木马的封闭 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