Question

目前的代码可以在这里找到：

http://www.bootply.com/11CfWtCAbX#

我想要的是这样的：

enter image description here

主要问题是我不知道如何将圆圈对齐以填充行..虽然Bootstrap有一个网格系统，它只接受整数，如col-lg-2但不接受col-lg-1.5。在我的情况下，有8个圆圈，所以我不知道如何轻松地对齐它们。

有没有人有这方面的想法？

Answer 1

您可以定义自己的cols。请参阅：http://www.bootply.com/AnCCbwcwEA

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

CSS：.myCol的{{1}}为width，因为100/8 = 12.5％。 12.5% .circle有margin: 0 auto个.myCol

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

}

Answer 2

这可以解决您的问题。您可以在开头使用col-lg-offset-2的偏移量。如果有8个圆圈，则div被分成12个部分。前两个部分将为空，接下来的两个部分将为圆形，最后两个将为空。

这是最简单的方法。

Answer 3

您可以按照建议here使用inline-block元素和对齐文本来实现

HTML

<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>

CSS

.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;
 }

bootply：http://www.bootply.com/MtJN37CkS5

如何在CSS / Bootstrap中一行排列元素？

3 个答案: