如何在没有装订线的情况下在Bootstrap 3中创建8个偶数列

Question

我正在尝试创建一个自定义行,当坐在全尺寸桌面(lg)时,在页面底部的偶数列中有8个徽标,我需要它们响应地工作.

我尝试了一些选项 - 2个cols嵌套4个cols,4个cols嵌套2个cols ...我遇到的问题是gutter在列之间创建了额外的间距,这意味着徽标不会均匀分布.任何专家都能更好地了解如何将8个徽标均匀分布在一排？也许创建一个新的8 col自定义网格？

任何帮助都会很棒.

谢谢你

Answer 1

Bootstrap 3

如何使用list-inline4列2这样的..

  <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

由于Bootstrap 4是flexbox,现在可以使用自动布局网格任意数量的等宽列.

<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在行 - 流体内

<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

听起来这是针对特定模块的，所以我只需为此创建一个简单的新网格......

.eightLogos .logo {
  float: left;
  width: 12.5%;
  margin: 0;
  padding: 0;
}