如何将6列col-3封装在2行上
如何将6列col-3封装在2行上
提问于 2022-10-17 20:48:10
是否可以将最后3列封装到第二行并使其居中？基本上，我需要一种方法来抵消第一列的col-1.5。
<div class="row mx-n2 d-flex justify-content-start justify-content-lg-center">
<div class="col-6 col-lg-3"></div>
<div class="col-6 col-lg-3"></div>
<div class="col-6 col-lg-3"></div>
<div class="col-6 col-lg-3"></div>
<div class="col-6 col-lg-3"></div>
<div class="col-6 col-lg-3"></div>
</div>回答 4
Stack Overflow用户
发布于 2022-10-17 20:56:42
你应该能做这样的事：
.center {
margin: 0 auto;
}<div class="row">
<div class="center">
<div class="col-md-3">Div 1</div>
<div class="col-md-3">Div 2</div>
<div class="col-md-3">Div 3</div>
</div>
</div>
<div class="row">
<div class="center">
<div class="col-md-3">Div 1</div>
<div class="col-md-3">Div 2</div>
<div class="col-md-3">Div 3</div>
</div>
</div>
Stack Overflow用户
发布于 2022-10-18 13:49:48
添加多个.rows的另一种方法是使用只对大型设备可见的.w-100 div (通常用于隐藏它的.d-none和用于显示它的.d-lg-block)，从而打破了大屏幕的线条。
将此与.justify-content-center相结合将产生您想要的行为。下面列出了一个最低限度的工作示例：
.col-6 {
border: 1px solid gray;
}<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row justify-content-center">
<div class="col-6 col-lg-3">1</div>
<div class="col-6 col-lg-3">2</div>
<div class="col-6 col-lg-3">3</div>
<div class="w-100 d-none d-lg-block"></div>
<div class="col-6 col-lg-3">4</div>
<div class="col-6 col-lg-3">5</div>
<div class="col-6 col-lg-3">6</div>
</div>
小型设备的结果：
大型设备的结果：
Stack Overflow用户
发布于 2022-10-18 13:53:03
您可以在此之间添加以下内容：
<div class="w-100"></div>比如：
<div class="row mx-n2 d-flex justify-content-start justify-content-lg-center">
<div class="col-6 col-lg-3"></div>
<div class="col-6 col-lg-3"></div>
<div class="col-6 col-lg-3"></div>
<div class="w-100"></div>
<div class="col-6 col-lg-3"></div>
<div class="col-6 col-lg-3"></div>
<div class="col-6 col-lg-3"></div>
</div>检查这个：https://getbootstrap.com/docs/4.1/layout/grid/#equal-width
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74103084
复制相关文章
相似问题
腾讯云开发者
