如何将引导行的溢出列居中？答案

【问题标题】：how can to center overflow columns of bootstrap row?如何将引导行的溢出列居中？
【发布时间】：2020-04-15 12:19:21
【问题描述】：

我想将溢出的 boostrap 行的每个元素居中，例如：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row">
  <div class="col-lg-2"> col-lg-2 </div>
  <div class="col-lg-2"> col-lg-2 </div>
  <div class="col-lg-2"> col-lg-2 </div>
  <div class="col-lg-2"> col-lg-2 </div>
  <div class="col-lg-2"> col-lg-2 </div>
  <div class="col-lg-2"> col-lg-2 </div>
  <div class="col-lg-2"> col-lg-2 </div>
  <div class="col-lg-2"> col-lg-2 </div>
  <div class="col-lg-2"> col-lg-2 </div>
</div>

所以这一行有 6 列，然后在 3 列中溢出。我希望最后三列在中心对齐，例如margin: auto（参见示例图片）。我想对行使用单一样式。

我现在拥有的和我想要实现的形象：

【问题讨论】：

嘿，如果您能注意问题的措辞和格式，那就太好了。这将有助于社区回答您的问题。

标签： css twitter-bootstrap styles row

【解决方案1】：

只需将类 justify-content-center 添加到您的行中，如grid system documentation of BS4 中的#Horizontal alignment 部分所述。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="row justify-content-center">
  <div class="col-lg-2"> col-lg-2 </div>
  <div class="col-lg-2"> col-lg-2 </div>
  <div class="col-lg-2"> col-lg-2 </div>
  <div class="col-lg-2"> col-lg-2 </div>
  <div class="col-lg-2"> col-lg-2 </div>
  <div class="col-lg-2"> col-lg-2 </div>
  <div class="col-lg-2"> col-lg-2 </div>
  <div class="col-lg-2"> col-lg-2 </div>
  <div class="col-lg-2"> col-lg-2 </div>
</div>

【讨论】：