嗨，我的旋转木马幻灯片系统有问题。我第一次使用 Bootstrap，我对这些 col-something 东西迷失了。我想将图像作为背景和 3 张图像居中，一张左边，一张中间，一张右边。它还必须具有响应性并且 % 不起作用。
请帮忙
<!DOCTYPE html>
<html lang="cs">
<head>
<title>Bussiness</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="x-ua-compatible" content="IE=edge" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<style>
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,700');
.fa {
padding: 10px;
font-size: 50px;
width: 80px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
}
.fa:hover {
opacity: 0.7;
color: white;
text-decoration: none;
}
.fa-facebook {
background: #3B5998;
color: white;
}
.fa-instagram {
background: radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%);
color: white;
}
.fa-twitter {
background: #55ACEE;
color: white;
}
.nav-link{
font-size: 20px;
line-height: 55px;
border: solid black 0.1px;
margin-right: 10px;
}
img{
height: 500px;
}
@media only screen and (max-width: 767px) {
img{
height: 300px;
}
}
/*---Firefox Bug Fix --*/
.carousel-item {
transition: -webkit-transform 0.5s ease;
transition: transform 0.5s ease;
transition: transform 0.5s ease,-webkit-transform 0.5s ease;
-webkit-backface-visibility: visible;
backface-visibility: visible;
}
/*--- Fixed Background Image --*/
#fixed {
background-image: url('img/img2.jpg');
background-size: cover;
background-attachment: fixed;
height: 600px;
width: 100%;
-webkit-transform: translateZ(0);
transform: translateZ(0);
will-change: transform;
}
section {
position: relative;
height: 60%;
width: 100%;
margin: 0!important;
padding: 0px; /*odsazení*/
}
.fixed-wrap {
clip: rect(0,auto,0);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/*--- Bootstrap Padding Fix --*/
[class*="col-"] {
padding: 2.5rem;
}
</style>
<!--Navigace-->
<nav class = "navbar navbar-expand-md navbar-light bg-light sticky-top">
<div class = "container-fluid">
<a class = "navbar-brand" href = "#">[LOGO]</a>
<button class = "navbar-toggler" type = "button" data-toggler = "collapse" data-target = "#navbarResponsive">
<span class = "navbar-toggler-icon"></span>
</button>
<div class = "collapse navbar-collapse" id = "navbarResponsive">
<ul class = "navbar-nav ml-auto">
<li class = "nav-item active">
<a class = "nav-link" href = "#">Úvod</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">Kontakt</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">O nás</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">Produkty</a>
</li>
</ul>
</div>
</div>
</nav>
<!--Auto-Image-Swiper-->
<div id="slides" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-bs-target="#slides" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#slides" data-bs-slide-to="1"></li>
<li data-bs-target="#slides" data-bs-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/img1.jpg" class="d-block w-100">
<div class="carousel-caption">
<h1 class="display-2">Test</h1>
<h3>Testing of the test</h3>
<button type="button" class="btn btn-outline-light btn-lg">tester</button>
<button type="button" class="btn btn-primary btn-lg">Jop</button>
</div>
</div>
<div class="carousel-item">
<img src="img/img2.jpg" class="d-block w-100">
<div class="carousel-caption">
<div class = "container-fluid padding">
<div class = "row text-center padding">
<div class = "col-xs-16 col-sm8- col-md-4">
<img src="img/img1.jpg" class="d-block w-100" style = "width: 250px; height: 250px; border: solid black;">
</div>
<div class = "col-xs-16 col-sm-8 col-md-4">
<img src="img/img2.jpg" class="d-block w-100" style = "width: 250px; height: 250px; border: solid black;">
</div>
<div class = "col-xs-16 col-sm-8 col-md-4">
<img src="img/img3.jpg" class="d-block w-100" style = "width: 250px; height: 250px; border: solid black;">
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<img src="img/img3.jpg" class="d-block w-100">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#slides" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#slides" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>
</html>现在看起来像这样：on full screen
