用Bootstrap根据设计用空div获取间距
用Bootstrap根据设计用空div获取间距
提问于 2022-05-12 06:38:41
对于在特定位置有文本的班纳图部分，我不想写自定义CSS来放置div。下面的代码符合正确的设计，它在响应方面也很好。我并没有在任何地方都使用这段代码，但只在一个部分中使用，其中有一个条件可以在特定位置显示div或文本。我不想写自定义CSS。但是使用引导空div问题是解决的，这是否正确。
<div class="mainbannerimagewithtext">
<div class=" row-cols-1 row-cols-md-3 g-4 py-5 ">
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
</div>
<div class=" row-cols-1 row-cols-md-3 g-4 py-5 ">
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
</div>
<div class=" row-cols-1 row-cols-md-3 g-4 py-5 ">
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
</div>
<div class=" row-cols-1 row-cols-md-3 g-4 py-5 ">
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
</div>
<div class=" row-cols-1 row-cols-md-3 g-4 py-5 media ">
<div class="col px-5 ">
<p class="twentyfive ">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<p class="fifteen">Lorem ipsum dolor sit amet, consectetur adipiscing elitLorem ipsum dolor sit amet,
consectetur adipiscing elitLorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
<div class="col">
</div>
<div class="col">
</div>
</div>
<div class="container py-5">
<div class=" ">
<div class="text-start px-5 py-5">
<p class="adm-nf-twenty"></p>
<p class="adm-nf-twentyitalic"></p>
</div>
</div>
</div>
<div class="container py-5">
<div class=" ">
<div class="text-start px-5 py-5">
</div>
</div>
</div>
<div class="container py-5">
<div class=" ">
<div class="text-start px-5 py-5">
</div>
</div>
</div>
<div class="container py-5">
<div class=" ">
<div class="text-start px-5 py-5">
</div>
</div>
</div>
<div class="container py-5">
<div class="bluebox ">
<div class="text-start px-5 py-5">
<p class="twenty">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<p class="twentyitalic">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<p class="fifteenwhite">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<p class="fifteenwhite">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<p class="fifteenwhite"> Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
</div>
</div>回答 1
Stack Overflow用户
发布于 2022-05-12 07:30:45
我的意见是，您应该考虑使用偏移作为最佳实践，也可以自定义它为所有可用的屏幕大小引导提供。
像这样的 :
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-4">normal .col-md-4</div>
<div class="col-md-4 offset-md-4">.col-4 getting offset for 4 col in md screen size</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 getting offset for 3 col in md screen size</div>
<div class="col-md-3 offset-md-3">.col-md-3 getting offset for 3 col in md screen size</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 getting offset for 3 col in md screen size</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
也总是记得偏移，总是将列排列到右边的
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72211078
复制相关文章
相似问题
腾讯云开发者
