Bootstrap 4 Carousel缩略图移动到右侧而不是底部

Question

我使用bootstrap 4轮播滑块，使用此Sample

在示例链接中，我需要将底部thumnbnails移动到右侧，使用缩略图文本，如下图所示

我的代码：

<div class="row" id="slider">
                        <div class="col-md-5">
                            <div id="myCarousel" class="carousel slide">
                                <!-- main slider carousel items -->
                                <div class="carousel-inner" style="float:left;">
                                    <div class="active item carousel-item" data-slide-number="0">
                                        <img src="http://placehold.it/1200x480&amp;text=one" class="img-fluid">
                                    </div>
                                    <div class="item carousel-item" data-slide-number="1">
                                        <img src="http://placehold.it/1200x480/888/FFF" class="img-fluid">
                                    </div>
                                    <div class="item carousel-item" data-slide-number="2">
                                        <img src="http://placehold.it/1200x480&amp;text=three" class="img-fluid">
                                    </div>
                                    <div class="item carousel-item" data-slide-number="3">
                                        <img src="http://placehold.it/1200x480&amp;text=four" class="img-fluid">
                                    </div>

                                    <a class="carousel-control left pt-3" href="#myCarousel" data-slide="prev"><i class="fa fa-chevron-left"></i></a>
                                    <a class="carousel-control right pt-3" href="#myCarousel" data-slide="next"><i class="fa fa-chevron-right"></i></a>
                                </div>
                                <!-- main slider carousel nav controls -->


                            </div>
                        </div>
                        <div class="col-md-7">
                            <ul class="carousel-indicators list-inline" style="float:left;">
                                <li class="list-inline-item active" data-slide-to="0" data-target="#myCarousel">
                                    <a id="carousel-selector-0" class="selected">
                                        <img src="http://placehold.it/80x60&amp;text=one" class="img-fluid">
                                    </a>
                                </li>
                                <li class="list-inline-item" data-slide-to="1" data-target="#myCarousel">
                                    <a id="carousel-selector-1">
                                        <img src="http://placehold.it/80x60&amp;text=two" class="img-fluid">
                                    </a>
                                </li>
                                <li class="list-inline-item" data-slide-to="2" data-target="#myCarousel">
                                    <a id="carousel-selector-2">
                                        <img src="http://placehold.it/80x60&amp;text=three" class="img-fluid">
                                    </a>
                                </li>
                                <li class="list-inline-item" data-slide-to="3" data-target="#myCarousel">
                                    <a id="carousel-selector-3">
                                        <img src="http://placehold.it/80x60&amp;text=four" class="img-fluid">
                                    </a>
                                </li>


                            </ul>
                        </div>
                    </div>

/ *******在Bootstrap CSS ******* / .carousel-indicators {display：inline-block;}

Answer 1

尝试

.carousel {
  display:flex;
}

 .carousel-indicators {
  display:flex;
  flex-wrap: wrap;
}