如何使用引导网格使 3 个 div 居中答案

【问题标题】：How to center 3 divs with bootstrap grid如何使用引导网格使 3 个 div 居中
【发布时间】：2021-06-16 01:56:47
【问题描述】：

我有一个难题。

我需要使用引导程序将 3 个 div 居中。问题是中间 div 必须是 col-1。如果这样做：

<div class="row">
 <div class="col-auto"> div a</div>
 <div class="col-1">div b</div>
 <div class="col-auto"> div c</div>
</div>

我在一行中得到了我需要的东西，但我需要对齐多行并且都有不同的内容。我需要根据中间 div 对齐它。有什么想法吗？

欢迎使用 Bootstrap 框架、原始 CSS 或 Sass 的解决方案。

PS：当公司让后端开发人员做前端时！ ** 谢谢 **

【问题讨论】：

无论多么糟糕，你都能画出你想要的东西并包含它吗？
试试flexbox

标签： html css bootstrap-4 sass

【解决方案1】：

您可以使用justify-content-center 居中。

不要使用col-auto，它不会响应。所以最好只使用col 或col-4..col-md-4 。它会自动响应

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row justify-content-center">
 <div class="col-auto">div a</div>
 <div class="col-1">div b</div>
 <div class="col-auto"> div c</div>
</div>

【讨论】：

我放了一张图片，也许更容易想象我需要什么，图片中是您的解决方案，它非常适合一行。但不适用于多个
这适用于中等及以上的屏幕，但它可以响应较小的屏幕code sandbox

【解决方案2】：

这取决于您使用的 Bootstrap 版本。如果您使用的是 v4 及更高版本，则可以在 .row 元素上使用 justify-content-center 类。比如……

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container my-5">

  <div class="row justify-content-center bg-light py-3">
    <div class="col-auto">
      <div class="bg-secondary p-3 rounded text-nowrap">div a</div>
    </div>
    <div class="col-1">
      <div class="bg-primary p-3 rounded text-nowrap">div b</div>
    </div>
    <div class="col-auto">
      <div class="bg-secondary p-3 rounded text-nowrap">div c</div>
    </div>
  </div>

</div>

有关网格对齐的更多信息，请参阅此处的文档：https://getbootstrap.com/docs/4.6/layout/grid/#alignment

编辑

因为OP已经说过上面的解决方案是：

非常适合一排。但不是多个

对于多行，您只需重复整个 .row 结构...我在这里放了一个示例：https://jsfiddle.net/thelevicole/9axysvun/

我还创建了一个完全响应的版本：https://jsfiddle.net/thelevicole/9axysvun/1/ 请参阅下面的屏幕截图...

更大的设备：

小型设备：

【讨论】：

不，我需要中心 div 为 col-1（必须），我已经尝试过了，但我需要多行。对齐我单行
@albertosetim 我回答中的列宽是示例，我已更新以匹配您问题中的列宽。这有帮助吗？
我放了一张图片，也许更容易想象我需要什么，图片中是您的解决方案，非常适合单排。但不是多个。
@albertosetim 感谢您添加图片，绝对有帮助！请看我上面的编辑，我已经包含了一个如何处理多行的例子。希望这会有所帮助！

【解决方案3】：

你可以试试这样的：

<div class="row col-md-offset-2">
    <div class="col-md-3 box"></div>
    <div class="col-md-3 box"></div>
    <div class="col-md-3 box"></div>
</div>

PS：如果可行，请点赞，因为我也是后端人员：p

【讨论】：

谢谢，但我已经试过了。这是我的第一次。
检查我放的图片，也许有帮助。

【解决方案4】：

这是我现在要使用的解决方案，谢谢大家。

<div class="row justify-content-center">
  <div class="col-md-5 box"></div>
  <div class="col-md-1 box"></div>
  <div class="col-md-5 box"></div>
</div>

缺少一个 col-1，但 justify-content-center 有助于划分空间。响应式是下一个问题。

【讨论】：