如何将指示器放在bootstrap轮播底部的单独列和左右控件中

Question

请考虑以下代码：

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

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

和CSS：

{{1}}

这是小提琴：DEMO

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

我怎么能这样做？

由于

Answer 1

我使用绝对位置和％来使其响应，我对所有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