我可以将 Bootstrap Carousel 移到右边而不是居中吗？

Question

我正在使用 Bootstrap 旋转木马，但不确定是否可以将旋转木马移到最右边而不是放在中间。我一直在寻找它的示例，但除了将指示器向右移动外，我找不到其他任何东西。我想将整个 Carousel 向右移动，这样我就可以在左边有白色 space。我可以使用 Bootstrap 轮播来做到这一点吗？还是我应该寻找其他方式？

.mainCarousel {
    background-color: whitesmoke;
    margin-top: 0;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="mainCarousel">
    <div id="carouselExampleIndicators" class="carousel slide" 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>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img class="d-block w-100" src="images/1.jpg" alt="First slide">
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" src="images/2.jpg" alt="Second slide">
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" src="images/1.jpg" alt="Third slide">
            </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>

Answer 1

将这 2 类 .w-75 .ml-auto 添加到 .mainCarousel 参见示例。如果您不想要包含 width: 75% !important; 的 .w-75，您可以在 CSS.

中将自定义 width 添加到 .mainCarousel

.mainCarousel {
    background-color: whitesmoke;
    margin-top: 0;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div class="mainCarousel w-75 ml-auto">
    <div id="carouselExampleIndicators" class="carousel slide" 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>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img class="d-block w-100" src="https://images.pexels.com/photos/1051399/pexels-photo-1051399.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="First slide">
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" src="https://images.pexels.com/photos/2741458/pexels-photo-2741458.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Second slide">
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" src="https://images.pexels.com/photos/2175211/pexels-photo-2175211.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Third slide">
            </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>

Answer 2

如果您只想在旋转木马的左侧显示 non-writable 白色 space，请使用已接受答案的方法。事实上，您甚至不需要将宽度设置为 75%。您可以只向旋转木马添加左内边距。

如果你想 space 在轮播的左边，这样你就可以在那里放一些文本，并且你希望它是响应式的，使用网格系统来构造布局，并将右栏轮播。

以下只是一个例子。我不知道你想要旋转木马多长时间，and/or 当你想要左边堆叠在右边栏的顶部时：

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4">
            Writable area
        </div>
        <div class="col-lg-8">
            <div class="mainCarousel" />
        </div>
    </div>
</div>

在大断点及以上：

大断点以下：

演示： https://jsfiddle.net/davidliang2008/sj541uoL/7/

我可以将 Bootstrap Carousel 移到右边而不是居中吗？

Can I move Bootstrap Carousel to the right instead of center?

html

css

carousel

bootstrap-4