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>

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>

Answer 2

我不确定你对这个问题真正想要什么。所以你有“2个答案”

1. 如果您需要直接在内容周围留出间距，请使用填充。如果您想让它“在”框外，请使用边距。
2. 请注意，您使用的是 col-lg-6（lg 仅适用于窗口 >= 992px，因此不适用于移动设备） 引导程序知道“col-6”、“col-sm-6”、“col-md-6”、“col-lg-6”、“col-xl-6”、“col-xxl-6”
3. 如果你想在任何地方都一样，请使用“col-6”。这是因为“例如，在桌面上你想要两列中的内容 - “col-xxl-6”，但如果你想要在较小的屏幕上只有一个（因为你的内容太小），你可以使用像“col- 12 col-lg-6" 所以在较小的你将有 1 列，在更大的 2 :) tadaaa

例如下面 - 绿色是填充，橙色是边距