我想做的是：图像
我的代码中的问题是，我使用bootsrap网格系统来轻松实现这一点，但当我将这两个文本和图像放在网格系统(行和列(中时，它们看起来像这样：有问题的图像。我如何才能达到我放的第一张照片中的效果？此外，我希望我的网站能够响应。因此，请写一个相应的答案。谢谢
HTML:
<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<!-- Own CSS-->
<link rel="stylesheet" href="stayil.css">
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Great+Vibes&family=Montserrat:wght@300;400;600;700&display=swap"
rel="stylesheet">
<title>Bati Gozen</title>
</head>
<body>
<!-- Navbar -->
<header id="home">
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<a class="navbar-brand" href="#home">Batı Gözen</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#mywork">My Work</a>
<a class="nav-link" href="#resume">CV</a>
</div>
</div>
</div>
</nav>
<!-- Explanation !!!!!!!!I HAVE PROBLEM HERE!!!!!!!!-->
<div class="container-fluid text-center mt-3">
<div class="row justify-content-center">
<div class="col-12">
<img src="images/IMG_0109.jpg" alt="My Picture" class="img-fluid myimage">
<h1 class="name mt-4 mb-3">Batı Gözen</h1>
<p class="caption">"Web Developer, Mix&Masterig Specialist"</p>
</div>
</div>
</div>
</div>
<div class="container-fluid text-center ib-section">
<div class="row">
<div class="col-6">
<div class="col-6"><img class="img-fluid ib" src="images/ibimag.png" alt="IB"></div>
</div>
<div class="col-6 m-auto">
<h3 class="img-fluid"> IB Student, 12.th Grade</h3>
</div>
</div>
</header>
<!-- Photo Gallery -->
<section id="mywork">
<h3>My Work</h3>
<div class="continer-fluid">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12 col-12">
<img src="images/1.png" alt="Certificate" class="basari">
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-12">
<img src="images/2.png" alt="Certificate" class="basari">
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-12">
<img src="images/3.jpg" alt="Certificate" class="basari">
</div>
</div>
<div class="row paddingekle">
<div class="col-lg-4 col-md-4 col-sm-12 col-12">
<img src="images/1.png" alt="Certificate" class="basari">
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-12">
<img src="images/5.png" alt="Certificate" class="basari">
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-12">
<img src="images/6.jpg" alt="Certificate" class="basari">
</div>
</div>
</div>
</section>
<!-- Resume -->
<section id="resume">
<h3>My Resume</h3>
<button class="btn btn-lg btn-light">
<a href="images/Bati's+Resume+(4).pdf" class="pdf"><i class="far fa-file-pdf"></i> Download</a>
</button>
</section>
<!-- Bootsrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
crossorigin="anonymous"></script>
</body>
</html>
CSS：
body {
background-color: #CDF0EA;
font-family: 'Montserrat', sans-serif;
}
.ib-section {
margin: 60px 0;
}
.ib {
max-width: 200px;
}
.name {
font-family: 'Great Vibes', cursive;
font-size: 4.8rem;
letter-spacing: 0.3px;
}
.caption {
font-size: 1.4rem;
letter-spacing: 0.8px;
}
.myimage {
max-width: 18%;
border-radius: 14%;
}
.navbar-brand,
.nav-link {
color: #555555;
}
.navbar-brand {
margin-left: 10px;
}
.navbar-brand:hover,
.nav-link:hover {
color: black;
}
因为您希望这些元素紧密分组，所以将它们嵌套在同一父级中并仅在该父级上使用flex是有意义的。
而不是在两个不同的.col中制作它们。尝试将它们放在同一个类中，并将.d-flex与该父级上的.align-items-center和.justify-content-center类一起使用。然后，您可以使用.gap-3作为两个元素之间间隙的1rem。
body {
background-color: #CDF0EA;
font-family: 'Montserrat', sans-serif;
}
.ib-section {
margin: 60px 0;
}
.ib {
max-width: 200px;
}
.name {
font-family: 'Great Vibes', cursive;
font-size: 4.8rem;
letter-spacing: 0.3px;
}
.caption {
font-size: 1.4rem;
letter-spacing: 0.8px;
}
.myimage {
max-width: 18%;
border-radius: 14%;
}<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Explanation !!!!!!!!I HAVE PROBLEM HERE!!!!!!!!-->
<div class="container-fluid text-center mt-3">
<div class="row justify-content-center">
<div class="col-12">
<img src="https://dummyimage.com/100/000/fff" alt="My Picture" class="img-fluid myimage">
<h1 class="name mt-4 mb-3">Batı Gözen</h1>
<p class="caption">"Web Developer, Mix&Masterig Specialist"</p>
</div>
</div>
</div>
<div class="container-fluid text-center ib-section">
<div class="row">
<div class="col-12 d-flex align-items-center justify-content-center gap-3">
<img class="img-fluid ib" src="https://dummyimage.com/100/000/fff" alt="IB">
<h3 class="img-fluid"> IB Student, 12.th Grade</h3>
</div>
</div>
</div>