Javascript 在CSS/Bootstrap中，如何在一行中均匀对齐元素？

当前代码可在此处找到：

我想要的是这样的：

主要的问题是我不知道如何将圆圈平均对齐来填充这一行。。虽然Bootstrap有一个网格系统，但它只接受整数，如

col-lg-2

，而不接受

col-lg-1.5

。在我的例子中，有8个圆，所以我不知道如何轻松地对齐它们

---

有人对此有想法吗

这可能会解决您的问题。您可以在开始时使用col-lg-offset-2的偏移量。Tus，如果有8个圆，div被分成12个部分。前两部分为空，下8部分为圆，后两部分为空

---

这是最简单的方法。

您可以按照建议使用

内联块

元素和对齐文本来实现这一点

HTML

---

bootply:

您可以定义自己的COL。见：

---

我还发现你的.circle类凌驾于col lg CSS之上，我会将circle类作为一个单独的div粘贴在列中，你不能在类名中使用点。Css在dot之后检测到这样一个新类。

<div class＝"container">
<h1>Test</h1>
<div class="row">
    <div class="col-lg-4 col-lg-offset-4" id="box">
      <div class="text-center">Data Quality</div>
      <div class="row inline-row">
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
      </div>
    </div>

  </div>
</div>

.circle {
    background: #A9A9A9;
    height:30px;
    width: 30px;
    border-radius:50%
}

.inline-row {
     text-align: justify;
}

.inline-row div {
    display: inline-block; 
}

.inline-row:after {
      width: 100%;
      content: " ";
      display: inline-block;
 }

<div class="row">
   <div class="myCol">
      <div class="circle"></div>
   </div>
   <!-- Seven more circles here -->
</div>

.circle {
  background: #A9A9A9;
    height:30px;
    width: 30px;
    border-radius:50%;
    margin: 0 auto;
  }
.myCol
{
  width: 12.5%;
  position: relative;
  float: left;

}