引导轮播不使用背景图像答案

【问题标题】：Bootstrap carousel not working with background image引导轮播不使用背景图像
【发布时间】：2018-06-29 04:26:44
【问题描述】：

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

<!-- The slideshow --> 
<div class="carousel-inner"> 
    <div class="active item one" style="background-image:url('1.jpg')">
    </div> 
    <div class="item two" style="background-image:url('2.jpg')">
    </div> 
    <div class="item three" style="background-image:url('3.jpg')">
    </div> 
</div>

【问题讨论】：

请发布代码 sn-p 您想要实现的目标以及您在哪里遇到问题。
这些背景图片在轮播中没有变化
如果您可以使用 plnkr.co 或其他网站，甚至在您的主帖中粘贴代码，那就更好了。您面临的具体问题是什么？
我用 cmets 中提供的代码 @ShNajam 更新了这个问题。

标签： twitter-bootstrap carousel bootstrap-4

【解决方案1】：

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

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

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

【讨论】：

我不知道它是否对他有用，但它对我有用。谢谢！
对我不起作用。我需要底部的所有 Jquery 和 JS 东西吗？

【解决方案2】：

如 cmets 所述，发生这种情况是因为轮播大小取决于图像尺寸。

最简单的方法是强制轮播尺寸。您可以通过将以下代码添加到您的 CSS 来做到这一点：

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

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

【讨论】：