如何解决如何使 Bootstrap 5 轮播和页脚全宽
如果这已经存在，我很抱歉，但它没有帮助我。 我必须使用 Bootstrap 5 和 Carousel 制作一个 3 页的网站。这里的问题是 Carousel 不是我希望的全宽。
HTML：
<main class="container pt-3 mt-5 pb-3">
<!-- Carousel -->
<div
id="carouselExampleControls"
class="carousel slide border rounded"
data-bs-ride="carousel"
>
<div class="carousel-inner rounded">
<div class="carousel-item active">
<img
src="Images/Compressed/Т-34-85.jpg"
class="d-block w-100"
alt="Soviet medium tank T-34/85"
title="Soviet medium tank T-34/85"
/>
<div class="carousel-caption d-none d-md-block">
<h5>T-34/85</h5>
</div>
</div>
<div class="carousel-item">
<img
src="Images/Compressed/KV-1.JPG"
class="d-block w-100"
alt="Soviet heavy tank KV-1"
title="Soviet heavy tank KV-1"
/>
<div class="carousel-caption d-none d-md-block">
<h5>KV-1</h5>
</div>
</div>
<div class="carousel-item">
<img
src="Images/Compressed/Panzer_V_Panther.jpg"
class="d-block w-100"
alt="German medium tank Pz. V Panzer_V_Panther"
title="German medium tank Pz. V Panther"
/>
<div class="carousel-caption d-none d-md-block">
<h5>Pz. V Panther</h5>
</div>
</div>
<div class="carousel-item">
<img
src="Images/Compressed/Tiger_I.jpg"
class="d-block w-100"
alt="German heavy tank Pz. VI Tiger I"
title="German heavy tank Pz. VI Tiger I"
/>
<div class="carousel-caption d-none d-md-block">
<h5>Pz. VI Tiger I</h5>
</div>
</div>
<div class="carousel-item">
<img
src="Images/Compressed/Valentine_II.jpg"
class="d-block w-100"
alt="British infantry tank Valentine II"
title="British infantry tank Valentine II"
/>
<div class="carousel-caption d-none d-md-block">
<h5>Valentine II</h5>
</div>
</div>
<div class="carousel-item">
<img
src="Images/Compressed/Churchill_VI.jpg"
class="d-block w-100"
alt="British heavy tank Churchill VI"
title="British heavy tank Churchill VI"
/>
<div class="carousel-caption d-none d-md-block">
<h5>Churchill VI</h5>
</div>
</div>
<div class="carousel-item">
<img
src="Images/Compressed/M18_Hellcat.jpg"
class="d-block w-100"
alt="American tank destroyer M18 Hellcat"
title="American tank destroyer M18 Hellcat"
/>
<div class="carousel-caption d-none d-md-block">
<h5>M18 Hellcat</h5>
</div>
</div>
<div class="carousel-item">
<img
src="Images/Compressed/M4_Sherman.jpg"
class="d-block w-100"
alt="American medium tank M4 Sherman"
title="American medium tank M4 Sherman"
/>
<div class="carousel-caption d-none d-md-block">
<h5>M4 Sherman</h5>
</div>
</div>
</div>
<button
class="carousel-control-prev rounded"
type="button"
data-bs-target="#carouselExampleControls"
data-bs-slide="prev"
title="PrevIoUs"
>
<span
class="carousel-control-prev-icon"
aria-hidden="true"
></span>
<span class="visually-hidden"><</span>
</button>
<button
class="carousel-control-next rounded"
type="button"
data-bs-target="#carouselExampleControls"
data-bs-slide="next"
title="Next"
>
<span
class="carousel-control-next-icon"
aria-hidden="true"
></span>
<span class="visually-hidden">></span>
</button>
</div>
<!-- Footer -->
<footer
class="bg-primary text-white text-center text-lg-start rounded mt-2"
>
<div class="container p-4">
<div class="row">
<div class="col-lg-6 col-md-12 mb-4 mb-md-0">
<h5 class="text-uppercase">Used references</h5>
<p>
There may be something incorrect,I'm not
flawless. You can check the references I used to
be more sure or to check information on other
sources.
</p>
</div>
<div class="col-lg-3 col-md-6 mb-4 mb-md-0">
<h5 class="text-uppercase">information</h5>
<ul class="list-unstyled mb-0">
<li>
<a href="#!" class="text-white">Link 1</a>
</li>
<li>
<a href="#!" class="text-white">Link 2</a>
</li>
<li>
<a href="#!" class="text-white">Link 3</a>
</li>
<li>
<a href="#!" class="text-white">Link 4</a>
</li>
</ul>
</div>
<div class="col-lg-3 col-md-6 mb-4 mb-md-0">
<h5 class="text-uppercase mb-0">Pictures</h5>
<ul class="list-unstyled">
<li>
<a href="#!" class="text-white">Link 1</a>
</li>
<li>
<a href="#!" class="text-white">Link 2</a>
</li>
<li>
<a href="#!" class="text-white">Link 3</a>
</li>
<li>
<a href="#!" class="text-white">Link 4</a>
</li>
</ul>
</div>
</div>
</div>
<div
class="text-center p-3"
style="background-color: rgba(0,0.2)"
>
Please note,that this page is still in development. Thank
you for understanding.
</div>
</footer>
</main>
CSS 代码与 Bootstrap 相同。
这是现在的样子： screen of the carousel
提前致谢，祝您有美好的一天！
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
