【问题标题】:Bootstrap 4 carousel slider arrows alignmentBootstrap 4轮播滑块箭头对齐
【发布时间】:2018-05-01 10:13:29
【问题描述】:

我正在使用 Bootstrap 4 Alpha 6 轮播插件来交互 div 滑块。

我希望左右透明按钮分别位于最右端和最左端,如下图所示。

我已尝试更改位置并遵循previous post 方法,但一切都不适用于我的情况。

.carousel-control .glyphicon-chevron-right, .carousel-control .icon-next {
  right: 0;
}

.carousel-control .glyphicon-chevron-left, .carousel-control .icon-prev {
  left: 0;
}

有没有人推荐处理这个问题的最佳方法? 提前致谢!

【问题讨论】:

    标签: jquery css carousel bootstrap-4 slide


    【解决方案1】:

    Bootstrap 4 不使用 glyphicon,整个框架已在此新版本中重写。这意味着 bootstrap 3 的 carousel sn-ps 可能无法在 Bootstrap 4 中工作。

    Bootstrap 4 Alpha 中的左右箭头与 icon-previcon-next 类相关联。

    因此,您可以使用此代码将它们分别设置为最右端和最左端。

    .carousel-control .icon-prev{
      left: 5px
    }
    .carousel-control .icon-next{
      right: 5px
    }
    

    Codepen 演示:https://codepen.io/Washable/pen/EbbOXd?editors=1100

    【讨论】:

    • 谢谢,这对我很有帮助!当我使用 4.0.0-alpha.6 CSS 框架时,是否可以保持 icon-previcon-next 按钮显示?
    • @Yi-TingLiu 没错,icon-previcon-next 在 4.0.0-alpha.6 CSS 框架中得到支持。 :)
    猜你喜欢
    • 2018-11-30
    • 2017-11-06
    • 2018-04-07
    • 2017-12-26
    • 2014-11-06
    • 2018-01-22
    • 1970-01-01
    • 2023-03-19
    • 1970-01-01
    相关资源
    最近更新 更多