Question

我想在我的Bootstrap 4轮播中添加背景图片，但它不起作用。我需要帮助代码。

gen(...)

Answer 1

这是因为轮播的高度由.carousel-item s的高度决定，但没有任何内容或明确设置的高度，幻灯片的高度为0px。请注意，在元素上设置background-image不会设置它的高度。

为了使您的轮播可见，您必须设置.carousel-item的高度。下面的示例使用Embed utility类让.carousel-item具有21：9的宽高比。

＆＃13;

<div id="carousel" class="carousel slide" data-ride="carousel">
    <!-- Note the `embed-responsive embed-responsive-21by9` classes on the items wrapper -->
    <div class="carousel-inner embed-responsive embed-responsive-21by9">
        <!-- Carousel items have `.embed-responsive-item` -->
        <div class="carousel-item embed-responsive-item active" style="background-image:url('http://via.placeholder.com/525x225/adeee3/ffffff?text=1.jpg')">
        </div>
        
        <div class="carousel-item embed-responsive-item" style="background-image:url('http://via.placeholder.com/525x225/86deb7/ffffff?text=2.jpg')">
        </div>

        <div class="carousel-item embed-responsive-item" style="background-image:url('http://via.placeholder.com/525x225/63b995/ffffff?text=3.jpg')">
        </div>
    </div>
</div>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

＆＃13;

Answer 2

如评论中所述，发生这种情况是因为轮播尺寸取决于图像尺寸。

最简单的方法是强制轮播尺寸。您可以通过在 CSS 中添加以下代码来实现：

.carousel,
.carousel-item,
.carousel-inner {
    height: 400px !important;
    width: 100% !important;
}

这样，轮播图的高度将是您选择的高度（400 像素），并且轮播图将填充放置它的列、行或容器。

Bootstrap转盘不与背景图象一起使用

2 个答案: