如何设置引导轮播？

Question

我想从 bootstrap 添加一个轮播到我的页面，但我真的很难在每个屏幕上设置它，当它在移动设备上看起来不错然后在大屏幕上它会增加图像并削减边。我已经不知道我用了多少种不同的方法来使它看起来正确。

我尝试将显示从 blok 更改为 flex，然后我将更大屏幕上的默认引导程序宽度更改为 75%，也许这不会是一个坏结果，但随后我需要将幻灯片移动到屏幕的中心div，但我不知道如何，没有任何方法可以使整个旋转木马居中。而且当我在媒体屏幕最小宽度上将宽度设置为 75% 时：768px，然后当我缩小窗口时，轮播变小直到移动断点，所以我不确定我应该设置什么媒体查询这在各种尺寸上看起来都不错。

<div class="row container-fluid">
        <div id="slide" class="col-12 col-md-6">
            <div id="carouselExampleIndicators" class="carousel" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
                </ol>
                <div class="carousel-inner carousel">
                    <div class="carousel-item active">
                        <img src="assets/images-car/cat1.png" class="d-block w-100"
                            alt="a ginger cat sitting on the stairs">
                    </div>
                    <div class="carousel-item">
                        <img src="assets/images-car/cat2.png" class="d-block w-100"
                            alt="a black-white kitten on young buddha's hands">
                    </div>
                    <div class="carousel-item">
                        <img src="assets/images-car/cat11.png" class="d-block w-100"
                            alt="a black cat laying on the colorful fabrics">
                    </div>
                    <div class="carousel-item">
                        <img src="assets/images-car/cat4.png" class="d-block w-100"
                            alt="a white cat with blue eyes covered in colorful fabric">
                    </div>
                </div>
                <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>

@media only screen and (min-width: 768px) {
.carousel {width:75%; height:50vh;}}