Bootstrap 5间隔-如何在Bootstrap网格中设置行项之间的间距

Question

您好，我正在使用bootstrap 5和网格功能。我已经将我的布局分成了两行。一行包含文本和图像，另一行包含两个图像。

它在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

您可以在每个列div的底部添加边距或填充。由于您使用的是col- lg -6，因此对于小于lg的屏幕尺寸，列将变为全宽。添加底边距会给你留出一个空格。如果你不想要lg屏幕上的空间，那么你可以使用mb-3mb-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只用于window >= 992px，所以不是移动设备) Bootstrap知道"col-6"，"col-sm-6"，"col-md-6"，"col-lg-6"，"col-xl-6"，"col-xxl-6"“

”

​

1. 如果你想在任何地方都一样，使用“-6”。这是因为“例如，在桌面上你想要2栏的内容- "col-xxl-6"，但如果你想在较小的屏幕上只有一个(因为你的内容会太小)，你可以使用类似”of 12 col lg-6“的类，所以在较小的屏幕上你会有1列，在较大的2 :) tadaaa中

例如，下面-绿色表示填充，橙色表示边缘

​

​

​

​