关于 bootstrap 轮播调整大小的问题

Question

我正在尝试调整 bootstarp 4 旋转木马的大小。但是在我这样做之后。剩下一些白色背景。

我试过使背景透明，none。 margin, border, padding 到 0. box-shadow 到 none.

没有任何帮助。

但是如果我在 "carousel" 或 "float: left;" 旁边添加 class "carousel-caption" 白色背景就会消失。

我想知道是否有其他方法可以解决这个问题。是什么原因造成的。

Codepen：https://codepen.io/kudratullah/pen/bmdNjp（Codepen 不是我的，但和我有同样的问题。）

如果您将所有背景颜色都变成黑色，您仍然可以看到轮播的 left/right 侧仍然是白色背景。

屏幕截图：Codepen

我的代码如下：

HTML:

<div id="demo" class="carousel slide slider-horizontal" data-ride="carousel">
    <ul class="carousel-indicators">
        <li data-target="#demo" data-slide-to="0" class="active"></li>
        <li data-target="#demo" data-slide-to="1" class="active"></li>
        <li data-target="#demo" data-slide-to="2" class="active"></li>
    </ul>

    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="Picture.jpg">
        </div>
        <div class="carousel-item">
            <img src="Picture.jpg">
        </div>
        <div class="carousel-item">
            <img src="Picture.jpg">
        </div>
    </div>

        <a class="carousel-control-prev" href="#demo" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </a>
        <a class="carousel-control-next" href="#demo" data-slide="next">
            <span class="carousel-control-next-icon"></span>
        </a>
</div>

CSS:

.slider-horizontal
{
    width: 60%;
    margin: auto;
}
.carousel-inner img
{
    width: 100%;
}

非常感谢！！

Answer 1

请使用额外的容器 class 并将背景更改为 black.Here 的解决方案：

body
{
    background: black!important;
}

.container{
background:black;
}

.slider-horizontal
{
    width: 60%;
    margin: auto;
   
}
.carousel-inner img
{
    width: 100%;
}

<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>

<body>
<div class="container">
<div id="demo" class="carousel slide slider-horizontal" data-ride="carousel">
    <ul class="carousel-indicators">
        <li data-target="#demo" data-slide-to="0" class="active"></li>
        <li data-target="#demo" data-slide-to="1" class="active"></li>
        <li data-target="#demo" data-slide-to="2" class="active"></li>
    </ul>

    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="https://image.shutterstock.com/image-photo/lovely-beach-picture-beautiful-260nw-1554809048.jpg">
        </div>
        <div class="carousel-item">
            <img src="https://image.shutterstock.com/image-photo/lovely-beach-picture-beautiful-260nw-1554809048.jpg">
        </div>
        <div class="carousel-item">
            <img src="https://image.shutterstock.com/image-photo/lovely-beach-picture-beautiful-260nw-1554809048.jpg">
        </div>
    </div>

        <a class="carousel-control-prev" href="#demo" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </a>
        <a class="carousel-control-next" href="#demo" data-slide="next">
            <span class="carousel-control-next-icon"></span>
        </a>
</div>
</body>

如果您还想要其他东西，请告诉我。

关于 bootstrap 轮播调整大小的问题

Problem about bootstrap carousel resizing

slideshow

carousel

bootstrap-4