jquery - 如何将指示器放置在单独的列中以及左侧和右侧控件在自举轮播的底部

请考虑以下代码：

<div class="container">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
            <li data-target="#myCarousel" data-slide-to="3"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <div class="row">
                    <div class="col-md-2">
                        <a href="#" class="thumbnail">
                            <img src="Images/1.jpg" alt="Image" /></a>
                    </div>
                    <div class="col-md-2">
                        <a href="#" class="thumbnail">
                            <img src="Images/2.jpg" alt="Image" /></a>
                    </div>
                    <div class="col-md-2">
                        <a href="#" class="thumbnail">
                            <img src="Images/3.jpg" alt="Image" /></a>
                    </div>
                    <div class="col-md-2">
                        <a href="#" class="thumbnail">
                            <img src="Images/4.jpg" alt="Image" /></a>
                    </div>
                    <div class="col-md-2">
                        <a href="#" class="thumbnail">
                            <img src="Images/5.jpg" alt="Image" /></a>
                    </div>
                    <div class="col-md-2">
                        <a href="#" class="thumbnail">
                            <img src="Images/6.jpg" alt="Image" /></a>
                    </div>
                </div>
            </div>

            <div class="item">
                <div class="row">
                    <div class="col-md-2">
                        <a href="#" class="thumbnail">
                            <img src="Images/7.jpg" alt="Image" /></a>
                    </div>
                    <div class="col-md-2">
                        <a href="#" class="thumbnail">
                            <img src="Images/8.jpg" alt="Image" /></a>
                    </div>
                    <div class="col-md-2">
                        <a href="#" class="thumbnail">
                            <img src="Images/9.jpg" alt="Image" /></a>
                    </div>
                    <div class="col-md-2">
                        <a href="#" class="thumbnail">
                            <img src="Images/10.jpg" alt="Image" /></a>
                    </div>
                    <div class="col-md-2">
                        <a href="#" class="thumbnail">
                            <img src="Images/11.jpg" alt="Image" /></a>
                    </div>
                    <div class="col-md-2">
                        <a href="#" class="thumbnail">
                            <img src="Images/12.jpg" alt="Image" /></a>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="row">
                    <div class="col-md-2">
                        <a href="#" class="thumbnail">
                            <img src="Images/13.jpg" alt="Image" /></a>
                    </div>
                    <div class="col-md-2">
                        <a href="#" class="thumbnail">
                            <img src="Images/14.jpg" alt="Image" /></a>
                    </div>
                    <div class="col-md-2">
                        <a href="#" class="thumbnail">
                            <img src="Images/15.jpg" alt="Image" /></a>
                    </div>
                    <div class="col-md-2">
                        <a href="#" class="thumbnail">
                            <img src="Images/16.jpg" alt="Image" /></a>
                    </div>
                    <div class="col-md-2">
                        <a href="#" class="thumbnail">
                            <img src="Images/17.jpg" alt="Image" /></a>
                    </div>
                    <div class="col-md-2">
                        <a href="#" class="thumbnail">
                            <img src="Images/18.jpg" alt="Image" /></a>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="row">
                    <div class="col-md-2">
                        <a href="#" class="thumbnail">
                            <img src="Images/19.jpg" alt="Image" /></a>
                    </div>
                    <div class="col-md-2">
                        <a href="#" class="thumbnail">
                            <img src="Images/10.jpg" alt="Image" /></a>
                    </div>
                    <div class="col-md-2">
                        <a href="#" class="thumbnail">
                            <img src="Images/11.jpg" alt="Image" /></a>
                    </div>
                    <div class="col-md-2">
                        <a href="#" class="thumbnail">
                            <img src="Images/12.jpg" alt="Image" /></a>
                    </div>
                    <div class="col-md-2">
                        <a href="#" class="thumbnail">
                            <img src="Images/13.jpg" alt="Image" /></a>
                    </div>
                    <div class="col-md-2">
                        <a href="#" class="thumbnail">
                            <img src="Images/14.jpg" alt="Image" /></a>
                    </div>
                </div>
            </div>
        </div>

        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
</div>

和CSS：

.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
    width: 70%;
    margin: auto;
}

.thumbnail img {
    max-width: 100%;
    height: 120px;
}

这是小提琴：DEMO

我想将左箭头和右箭头放置在单独的列中（但我连续有6个项目），指示器放在滑块的底部，如下图所示：



我该怎么做？

谢谢

最佳答案

我使它处于绝对位置和％位置以使其响应，我对所有css进行了注释，以便您检查为什么我制定了这些规则:)

的CSS

#myCarousel {
    width: 85%; /* Resize the carousel so it have spaces on left-right for arrows*/
    position: absolute;
    left:  50%; /* forces the carousel be on the middle always */
    transform: translateX(-50%); /* forces the carousel be on the middle always */
    margin-bottom:35px; /* Very important to show the bullets down the carousel and let overflow:hidden show them */
}
.carousel-indicators {
    bottom:-35px; /* Take outsite the arrows*/
    background-color: green; /* color just for show them */
}
.carousel-control .icon-prev, .carousel-control .icon-next, .carousel-control .glyphicon-chevron-left{
    left: -45%; /* Left arrow absolute position negative to left*/
}
.icon-next, .carousel-control .glyphicon-chevron-right {
    left: 115% !important; /* Hard override to the right arrow position, without important dosen't works. */
}

DEMO

关于jquery - 如何将指示器放置在单独的列中以及左侧和右侧控件在自举轮播的底部，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41543292/