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

Question

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

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

任何帮助都会很棒。

谢谢 N

Answer 1

引导程序 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

---

引导程序 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 在 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

这是一个八宽 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的引导类）或使用以下 CSS：text-center.col-*

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

Answer 4

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

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

Answer 5

它很简单......只需在您的 css 中添加另一列。
最好不要编辑引导 CSS（并使用 cdn）。

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

1. 大屏幕和普通屏幕
2. 中等屏幕（ipad 分机）
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;}
}

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