如何在Bootstrap 3中创建8个偶数列

Question

我试图创建一个自定义的行，其中有8个标志坐在偶数列的页面底部时，坐在全尺寸桌面(lg)我需要他们的回应。

我已经尝试了几个选项-2个cols和4个cols嵌套，以及4个cols和2个cols嵌套...我的问题是，栏间距在列之间产生了额外的间距，这意味着徽标的间距不会均匀。有没有专家有更好的办法让我把8个logo均匀地排成一排？也许可以创建一个新的8列自定义网格？

任何帮助都是最好的。

感谢N

Answer 1

Bootstrap 3

使用包含4列2的list-inline怎么样？

  <ul class="list-inline row"> 
    <li class="col-sm-3"><div class="col-sm-6"></div><div class="col-sm-6"></div></li>
    <li class="col-sm-3"><div class="col-sm-6"></div><div class="col-sm-6"></div></li>
    <li class="col-sm-3"><div class="col-sm-6"></div><div class="col-sm-6"></div></li>
    <li class="col-sm-3"><div class="col-sm-6"></div><div class="col-sm-6"></div></li>
  </ul> 

演示：http://bootply.com/90906

Bootstrap 4

由于Bootstrap4是flexbox，因此现在可以使用auto-layout grid实现任意数量的等宽列。

<div class="container-fluid">
    <div class="row">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
        <div class="col">4</div>
        <div class="col">5</div>
        <div class="col">6</div>
        <div class="col">7</div>
        <div class="col">8</div>
    </div>
</div>

演示：http://www.codeply.com/go/AOVGoJncei

Answer 2

2列6，每4列3内row-fluid

<div class="row">
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-3"></div>
            <div class="col-md-3"></div>
            <div class="col-md-3"></div>
            <div class="col-md-3"></div>
        </div>
    </div>
    <div class="col-md-6">
          <div class="row">
            <div class="col-md-3"></div>
            <div class="col-md-3"></div>
            <div class="col-md-3"></div>
            <div class="col-md-3"></div>
        </div>      
    </div>
</div>

Answer 3

在这里扩展我的答案：https://stackoverflow.com/a/25023129/2266157

下面是一个8宽Bootstrap行结构的演示，

等间距(即列间距)...

<div class="container">
  <h2>No padding (.no-pad) on outermost columns (.col-md-6)<br></h2>

  <h3>Then nested columns can have padding...</h3>
  <div class="row no-pad">
    <div class="col-md-6">
      <div class="row">
        <div class="col-md-3"><i>col1</i></div>
        <div class="col-md-3"><i>col2</i></div>
        <div class="col-md-3"><i>col3</i></div>
        <div class="col-md-3"><i>col4</i></div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="row">
        <div class="col-md-3"><i>col1</i></div>
        <div class="col-md-3"><i>col2</i></div>
        <div class="col-md-3"><i>col3</i></div>
        <div class="col-md-3"><i>col4</i></div>
      </div>
    </div>
  </div>
</div>

...or确实没有列间距。

<div class="container">    
  <h3>...or not</h3>
  <div class="row no-pad">
    <div class="col-md-6">
      <div class="row no-pad">
        <div class="col-md-3"><i>col1</i></div>
        <div class="col-md-3"><i>col2</i></div>
        <div class="col-md-3"><i>col3</i></div>
        <div class="col-md-3"><i>col4</i></div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="row no-pad">
        <div class="col-md-3"><i>col1</i></div>
        <div class="col-md-3"><i>col2</i></div>
        <div class="col-md-3"><i>col3</i></div>
        <div class="col-md-3"><i>col4</i></div>
      </div>
    </div>
  </div>
</div>

除了Bootstrap之外，还需要此CSS

.row.no-pad {
  margin-right:0;
  margin-left:0;
}
.row.no-pad > [class*='col-'] {
  padding-right:0;
  padding-left:0;
}

下面是一个有效的演示：

http://www.bootply.com/eWWpj3G9tL

和徽标居中

要定位徽标，我可以使用<img class="img-responsive">，或者如果它们小于列宽，则可以使用text-align:center (或放置在.col-*上的引导程序类text-center )或使用以下CSS将它们居中：

#logos img {
    display:block;
    margin:0 auto;
}