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

Question

我正在尝试创建一个自定义行，当坐在全尺寸桌面（lg）时，在页面底部的偶数列中有8个徽标。我需要它们以响应方式工作。

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

任何帮助都会很棒。

由于 Ñ

Answer 1

Bootstrap 3

如何使用list-inline和4列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，现在可以使用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在行液

内

<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

这是一个带有

的八宽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>

......或者确实没有栏目排水沟。

<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">，要么如果它们小于列宽，那么CSS可以将它们置于text-align:center（或引导类）中心text-center放置.col-*或使用以下CSS：

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

Answer 4

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

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

Answer 5

简单......只需在你的CSS中添加另一列 最好不要编辑bootstrap CSS（并使用cdn）。

所以......我们需要为所有屏幕类型创建列css 我通常会处理3个屏幕大小，这意味着为此列创建3个css集

1. 大屏幕＆amp;普通屏幕
2. 中画面（ipad ext。）
3. 小屏幕（手机分机）

决策时间：
因为我们正在谈论8列很多 最好遵循这些css规则（在我看来）

我几乎总是在我的设计中使用.container类 除非在纵向模式下，否则使大屏幕模式适合平板电脑。

简而言之，这是一套很好的CSS规则

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {
    eight-col {width: 50%; padding: 0 15px;}
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
    eight-col {width: 20%; padding: 0 15px;}
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
    eight-col {float: left; width: 12.5%; margin: 0; padding: 0 5px;}
}

请注意：
我认为合适时会玩填充物。最好在移动模式下留一些额外的填充，但你可以玩它;）