html - Bootstrap 5 Gutters - 如何在 Bootstrap 网格中的行项目之间间隔

Question

嗨，我正在使用 bootstrap 5 并使用网格功能。我已将布局分成 2 行。一行有文本和图像，另一行有两个图像。

它在 PC 中显示完全正常，但在移动视图中，所有图像之间没有任何间距，而且看起来很糟糕。

我尝试使用排水沟，但没有成功，我不知道为什么。

请帮助。这是代码

<div class="container">
<div class="row ">
<div class="col-lg-6">
<ul>
<li>The GATE course of Digcademy has been designed by experts who have vast experience of competitive examinations.</li>
<li>The GATE course is a three-tier approach to make the students more confident about their preparation.</li>
<li>The course is supported by topicwise videos so that there is no scope of doubt about the topic in the minds of students.</li>
<li>It covers theoretical concepts along with lot of topic wise examples. The examples given in the text are strictly from previous year GATE questions so that students can know the types of questions asked in GATE from that particular topic.</li>
<li>The practice questions at the end of each chapter cover all questions from GATE which appeared in EE, EC and IN branches from 1991 to till date for vide coverage of concepts.</li>
<li>The course includes topic wise practice test. These tests would help the students to know their performance after learning the concepts of each chapter.</li>
</ul>
</div>

<div class="col-lg-6">
<img src="images/electrical eng-1.jpg" alt="" style="width: 100%; height: auto">
</div>
</div>
</div>

<div class="container px-4">
<div class="row gy-5">
<div class="col-lg-6">
<img src="images/elect & comm eng-1.jpg" alt="" style="width: 100%; height: auto; position: relative">

</div>

<div class="col-lg-6">
<img src="images/instrumentation eng-1.jpg" alt="" style="width: 100%; height: auto">

</div>
</div>
</div>

标签： htmlcssbootstrap-5

Answer 1

您可以在每个 col div 的底部放置边距或填充。由于您使用的是 col-lg-6，因此对于小于 lg 的屏幕尺寸，列将变为全宽。添加底部边距将为您提供空间。如果您不希望 lg 屏幕上的空间，那么您可以使用类似 mb-3 mb-lg-0 的东西在更大的屏幕上没有边距。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>

<div class="container">
<div class="row ">
<div class="col-lg-6">
<ul>
<li>The GATE course of Digcademy has been designed by experts who have vast experience of competitive examinations.</li>
<li>The GATE course is a three-tier approach to make the students more confident about their preparation.</li>
<li>The course is supported by topicwise videos so that there is no scope of doubt about the topic in the minds of students.</li>
<li>It covers theoretical concepts along with lot of topic wise examples. The examples given in the text are strictly from previous year GATE questions so that students can know the types of questions asked in GATE from that particular topic.</li>
<li>The practice questions at the end of each chapter cover all questions from GATE which appeared in EE, EC and IN branches from 1991 to till date for vide coverage of concepts.</li>
<li>The course includes topic wise practice test. These tests would help the students to know their performance after learning the concepts of each chapter.</li>
</ul>
</div>

<div class="col-lg-6 mb-3 mb-lg-0">
<img src="https://via.placeholder.com/480x360.png" alt="" style="width: 100%; height: auto">
</div>
</div>
</div>

<div class="container">
<div class="row">
<div class="col-lg-6 mb-3 mb-lg-0">
<img src="https://via.placeholder.com/480x360.png" alt="" style="width: 100%; height: auto; position: relative">

</div>

<div class="col-lg-6 mb-3 mb-lg-0">
<img src="https://via.placeholder.com/480x360.png" alt="" style="width: 100%; height: auto">

</div>
</div>
</div>