Question

我有一个在bootstrap帮助下制作的旋转木马。我正在尝试用导航栏替换轮播指示器（＆＃34;点导航＆＃34;）。这是标准点导航的代码

        <!-- Indicators dot nav -->
        <ul class="carousel-indicators">
            <li data-target="#my-carousel" data-slide-to="0" class="active"></li>
            <li data-target="#my-carousel" data-slide-to="1"></li>
            <li data-target="#my-carousel" data-slide-to="2"></li>
        </ul>

我用这个导航栏替换了它：

<!-- Navigation bar controls -->
<nav class="navbar navbar-inverse">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </button>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
            <ol class="nav navbar-nav">
                <li class="nav-item active" data-target="#my-carousel" data-slide-to="0"><a>slide 1</a></li>
                <li class="nav-item" data-target="#my-carousel" data-slide-to="1"><a>slide 2</a></li>
                <li class="nav-item" data-target="#my-carousel" data-slide-to="2"><a>slide 3</a></li>
            </ol>
        </div><!--/.nav-collapse -->
    </div>
</nav>

问题是，我想维护轮播指标类的功能。要做到这一点，我可以像这样添加轮播指示器：

<ol class="nav navbar-nav carousel-indicators">

但这显然改变了导航栏的风格，修复起来变得非常复杂。我可以非常干净地修复它，只需通过改变carousel类中bootstrap javascript中的一行代码：

this.$indicators = this.$element.find('.carousel-indicators')

到这个

this.$indicators = this.$element.find('.nav')

这解决了我的问题，但这感觉非常不合适。解决这个问题的正确方法是什么？

混合Bootstrap类并忽略样式

0 个答案: