我可以将 Bootstrap Carousel 移到右侧而不是中心吗？

Posted 2023-03-05

【中文标题】我可以将 Bootstrap Carousel 移到右侧而不是中心吗？

【英文标题】：Can I move Bootstrap Carousel to the right instead of center?

【发布时间】：2021-01-28 06:57:13

【问题描述】：

我正在使用 Bootstrap Carousel，但不确定是否可以将 Carousel 移动到最右边而不是放在中间。我已经寻找了它的一个例子，但除了将指示器向右移动之外我找不到任何其他东西。我想将整个 Carousel 向右移动，这样我就可以在左侧留出空白空间。我可以用 Bootstrap Carousel 做到这一点吗？还是我应该寻找其他方法？

.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" >
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" src="images/2.jpg" >
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" src="images/1.jpg" >
            </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>

【问题讨论】：

你可以把你的旋转木马包在另一个容器里然后移动它。

@sarah kim 你的代码 sn-p 似乎坏了？

@sarah kim：你有整个 12 列网格系统 (getbootstrap.com/docs/4.5/layout/grid) 来构建布局。

你用的是什么轮播库？

@LaurentC 我正在使用 Bootstrap Carousel.. 不确定库？

【参考方案1】：

将.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" >
            </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" >
            </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" >
            </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>

【参考方案2】：

如果您只想在轮播左侧有 不可写 空格，请使用接受的答案的方法。事实上，您甚至不需要将宽度设置为 75%。您可以将左侧填充添加到轮播中。

如果您想在轮播左侧留出空间以便可以在其中放置一些文本，并且希望它具有响应性，请使用网格系统构建布局，并将轮播放置在右侧列上。

以下只是一个例子。我不知道您希望轮播多长时间，和/或何时希望左侧堆叠在右侧列的顶部：

<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/

【讨论】：

嗨，非常感谢，所以我尝试了另一个网格系统（有很多，我想都试过了）但找不到合适的尺寸。而且我觉得它就像一个word文档，我向右移动一些东西然后一切都搞砸了！但我认为你建议的那个效果最好。

归功于 Bootstrap 框架。我确实认为这是最好的。我强烈建议您阅读他们的文档。在那之后，你会有很多新的想法来构建你的布局:)