blocks|key|444548|text|你应该能做这样的事：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|444549|​|444550|.center+{
++margin:+0+auto;
}|code-block|syntax|javascript|444551|<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>|444552|444553|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>You should be able to do something like this:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.center {
  margin: 0 auto;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="row"&gt;
  &lt;div class="center"&gt;
    &lt;div class="col-md-3"&gt;Div 1&lt;/div&gt;
    &lt;div class="col-md-3"&gt;Div 2&lt;/div&gt; 
    &lt;div class="col-md-3"&gt;Div 3&lt;/div&gt; 
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class="row"&gt;
  &lt;div class="center"&gt;
    &lt;div class="col-md-3"&gt;Div 1&lt;/div&gt;
    &lt;div class="col-md-3"&gt;Div 2&lt;/div&gt; 
    &lt;div class="col-md-3"&gt;Div 3&lt;/div&gt; 
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1713275|text|添加多个.rows的另一种方法是使用只对大型设备可见的.w-100+div+(通常用于隐藏它的.d-none和用于显示它的.d-lg-block)，从而打破了大屏幕的线条。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1713276|将此与.justify-content-center相结合将产生您想要的行为。下面列出了一个最低限度的工作示例：|1713277|​|1713278|.col-6+{
++border:+1px+solid+gray;
}|code-block|syntax|javascript|1713279|<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%2BY1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"+crossorigin="anonymous"></script>
<script+src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"+integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5%2B76PVCmYl"+crossorigin="anonymous"></script>

<link+rel="stylesheet"+href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"+integrity="sha384-Gn5384xqQ1aoWXA%2B058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/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>|1713280|1713281|小型设备的结果：|1713282|1713283|📷|atomic|1713284|1713285|大型设备的结果：|1713286|1713287|1713288|1713289|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://developer.qcloudimg.com/http-save/yehe-900000/9e10262bc5951c5cdaf66aed7f1d8f23.png|imageAlt|1|https://developer.qcloudimg.com/http-save/yehe-900000/c00bfb2cf9b50d04735043d51b693a23.png^0|4|5|R|6|1B|7|1P|B|0|3|N|0|0|0|0|0|0|0|0|1|0|0|0|0|0|0|1|1|0|0^^$0|@$1|2|3|4|5|6|7|1E|8|@$9|1F|A|1G|B|C]|$9|1H|A|1I|B|C]|$9|1J|A|1K|B|C]|$9|1L|A|1M|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1N|8|@$9|1O|A|1P|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|1Q|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|1R|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|L|7|1S|8|@]|D|@]|E|$M|N]]|$1|Q|3|I|5|6|7|1T|8|@]|D|@]|E|$]]|$1|R|3|S|5|6|7|1U|8|@]|D|@]|E|$]]|$1|T|3|I|5|6|7|1V|8|@]|D|@]|E|$]]|$1|U|3|V|5|W|7|1W|8|@]|D|@$9|1X|A|1Y|1|1Z]]|E|$]]|$1|X|3|I|5|6|7|20|8|@]|D|@]|E|$]]|$1|Y|3|Z|5|6|7|21|8|@]|D|@]|E|$]]|$1|10|3|I|5|6|7|22|8|@]|D|@]|E|$]]|$1|11|3|V|5|W|7|23|8|@]|D|@$9|24|A|25|1|26]]|E|$]]|$1|12|3|I|5|6|7|27|8|@]|D|@]|E|$]]|$1|13|3|-4|5|6|7|28|8|@]|D|@]|E|$]]]|14|$15|$5|16|17|18|E|$19|1A|1B|-4]]|1C|$5|16|17|18|E|$19|1D|1B|-4]]]]

<p>An alternative to adding multiple <code>.rows</code> would be using a <code>.w-100</code> div that is only visible for large devices (<code>.d-none</code> for generally hiding it and <code>.d-lg-block</code>) for displaying it, resulting in breaking the line for large screens).</p>
<p>Combining this with <code>.justify-content-center</code> results in your desired behavior. A minimal working example is listed below:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.col-6 {
  border: 1px solid gray;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"&gt;&lt;/script&gt;
&lt;script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"&gt;&lt;/script&gt;
&lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"&gt;&lt;/script&gt;

&lt;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"&gt;

&lt;div class="row justify-content-center"&gt;
    &lt;div class="col-6 col-lg-3"&gt;1&lt;/div&gt;
    &lt;div class="col-6 col-lg-3"&gt;2&lt;/div&gt;
    &lt;div class="col-6 col-lg-3"&gt;3&lt;/div&gt;
    &lt;div class="w-100 d-none d-lg-block"&gt;&lt;/div&gt;
    &lt;div class="col-6 col-lg-3"&gt;4&lt;/div&gt;
    &lt;div class="col-6 col-lg-3"&gt;5&lt;/div&gt;
    &lt;div class="col-6 col-lg-3"&gt;6&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>
<p>Result for small devices:</p>
<p><a href="https://i.stack.imgur.com/H00wc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/H00wc.png" alt="Result for small devices showing three rows with two columns" /></a></p>
<p>Result for large devices:</p>
<p><a href="https://i.stack.imgur.com/WBV2i.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WBV2i.png" alt="Result for large devices showing two rows with three columns that are centered" /></a></p>


blocks|key|444633|text|您可以在此之间添加以下内容：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|444634|+<div+class="w-100"></div>|code-block|syntax|javascript|444635|比如：|444636|<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>|444637|检查这个：https://getbootstrap.com/docs/4.1/layout/grid/#equal-width|offset|length|444638|entityMap|0|LINK|mutability|MUTABLE|url|https://getbootstrap.com/docs/4.1/layout/grid/#equal-width^0|0|0|0|0|5|1M|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|10|8|@]|9|@$M|11|N|12|1|13]]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

<p>You can add this in between:</p>
<pre><code> &lt;div class=&quot;w-100&quot;&gt;&lt;/div&gt;
</code></pre>
<p>Like:</p>
<pre><code>&lt;div class=&quot;row mx-n2 d-flex justify-content-start justify-content-lg-center&quot;&gt;
    &lt;div class=&quot;col-6 col-lg-3&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;col-6 col-lg-3&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;col-6 col-lg-3&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;w-100&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;col-6 col-lg-3&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;col-6 col-lg-3&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;col-6 col-lg-3&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<p>Check this: <a href="https://getbootstrap.com/docs/4.1/layout/grid/#equal-width" rel="nofollow noreferrer">https://getbootstrap.com/docs/4.1/layout/grid/#equal-width</a></p>


blocks|key|443163|text|您所需要的只是使用justify-content-lg-center.|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|443164|Bootstrap使用12网格系统，所以所有扩展该限制的列--例如，最后三列--将自动转到新行。|unordered-list-item|443165|443166|​|443167|div.col-lg-3+{
++border:+1px+solid;
}|code-block|syntax|javascript|443168|<link+href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"+rel="stylesheet"+/>

<div+class="container">
++<div+class="row+justify-content-lg-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="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>
</div>|443169|443170|entityMap^0|9|P|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|Y|8|@]|D|@]|E|$]]|$1|I|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]|$1|J|3|K|5|6|7|10|8|@]|D|@]|E|$]]|$1|L|3|M|5|N|7|11|8|@]|D|@]|E|$O|P]]|$1|Q|3|R|5|N|7|12|8|@]|D|@]|E|$O|P]]|$1|S|3|K|5|6|7|13|8|@]|D|@]|E|$]]|$1|T|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|U|$]]

<ul>
<li>All you need is just use <code>justify-content-lg-center</code>.</li>
<li>Bootstrap use 12 grid system so all column which expand that limit for example here, last three column will automatically goes to new row.</li>
</ul>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>div.col-lg-3 {
  border: 1px solid;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" /&gt;

&lt;div class="container"&gt;
  &lt;div class="row justify-content-lg-center"&gt;
    &lt;div class="col-6 col-lg-3"&gt;1&lt;/div&gt;
    &lt;div class="col-6 col-lg-3"&gt;2&lt;/div&gt;
    &lt;div class="col-6 col-lg-3"&gt;3&lt;/div&gt;
    &lt;div class="col-6 col-lg-3"&gt;4&lt;/div&gt;
    &lt;div class="col-6 col-lg-3"&gt;5&lt;/div&gt;
    &lt;div class="col-6 col-lg-3"&gt;6&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


<p>Is it possible to make 6 col-3 columns wrap the last 3 onto a second row and have them centered?
Basically, I need a way to offset the first column by col-1.5</p>
<pre><code>&lt;div class=&quot;row mx-n2 d-flex justify-content-start justify-content-lg-center&quot;&gt;
    &lt;div class=&quot;col-6 col-lg-3&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;col-6 col-lg-3&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;col-6 col-lg-3&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;col-6 col-lg-3&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;col-6 col-lg-3&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;col-6 col-lg-3&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>


How to wrap 6 columns of col-3 on 2 rows

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

是否可以将最后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"></d...

问如何将6列col-3封装在2行上
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将6列col-3封装在2行上EN