【发布时间】：2021-04-01 21:48:14
【问题描述】：
我想让这个 Bootstrap 3 轮播半页，但我看不出我需要改变什么才能做到这一点。它在一个小窗口中看起来不错，但是当我将窗口扩展到全屏时，轮播实际上占据了整个页面。如何让 Bootstrap 轮播在整个窗口中变成半页？
我尝试将它放在标题中，但没有奏效。
<div id="carousel1" class="carousel slide carousel-fade" data-ride="carousel">
<!--Indicators-->
<ol class="carousel-indicators">
<li data-target="#carousel1" data-slide-to="0" class="active"></li>
<li data-target="#carousel1" data-slide-to="1"></li>
<li data-target="#carousel1" data-slide-to="2"></li>
</ol>
<!--/.Indicators-->
<!--Slides-->
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<div class="view">
<img class="d-block w-100" src="write2.jpg"
alt="First slide">
<div class="mask rgba-black-light"></div>
</div>
<div class="carousel-caption">
<h3 class="h3-responsive">Light mask</h3>
<p>First text</p>
</div>
</div>
<div class="carousel-item">
<!--Mask color-->
<div class="view">
<img class="d-block w-100" src="step21.jpg"
alt="Second slide">
<div class="mask rgba-black-strong"></div>
</div>
<div class="carousel-caption">
<h3 class="h3-responsive">Strong mask</h3>
<p>Secondary text</p>
</div>
</div>
<div class="carousel-item">
<!--Mask color-->
<div class="view">
<img class="d-block w-100" src="read.jpg"
alt="Third slide">
<div class="mask rgba-black-slight"></div>
</div>
<div class="carousel-caption">
<h3 class="h3-responsive">Slight mask</h3>
<p>Third text</p>
</div>
</div>
</div>
<!--/.Slides-->
<!--Controls-->
<a class="carousel-control-prev" href="#carousel1" 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="#carousel1" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<!--/.Controls-->
</div>更新！轮播现在是半屏，但是随着窗口的扩大，图像越来越放大。我按照用户的建议使用 CSS 代码将轮播制作成半页，但同样作为窗口展开，图像被放大。如何在窗口展开时不放大图像？
.carousel-inner{
height: 50vh;
}
.item img{
height: 100% !important;
width: 100% !important;
}【问题讨论】：
-
请更新您的问题。您提供的 jsfiddle 是 bootstrap 4，而您提出的问题是关于 bootstrap 3。您在寻找哪个版本？
-
我更喜欢 Bootstrap 3，但我不知道如何手动将它添加到我的代码中，所以我不必下载它。 Bootstrap 4 的说明很简单，所以我就照做了。但我确实更喜欢 Bootstrap 4，但如果你也能以某种方式展示 Bootstrap 3 的示例，那就太好了。
-
检查下面的sn-p
-
我尝试查看使用 CDN 添加 Bootstrap 3 的 W3 教程，但没有成功。
-
我确实明白你在说什么。 Bootstrap 3 CDN 工作正常，我之前的答案是 Bootstrap 3。您的 Jsfiddle 示例是 Bootstrap 4，不要尝试将 V3 和 V4 加入俱乐部，因为它们不同。
标签： html css twitter-bootstrap twitter-bootstrap-3