twitter-bootstrap 如何在没有装订线的情况下在 Bootstrap 3 中创建 8 个偶数列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19677570/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to create 8 even columns in Bootstrap 3 with out gutter
提问by Neek
I'm trying to create a custom row which has 8 logos sat in even columns at the bottom of a page when sat at full size desktop (lg) I need them to work responsively.
我正在尝试创建一个自定义行，当位于全尺寸桌面 (lg) 时，它在页面底部的偶数列中有 8 个徽标，我需要它们响应式工作。
I've tried a few options - 2 cols with 4 cols nested and 4 cols with 2 cols nested... the problem I have is the gutter creates extra spacing between columns which means the logos won't space evenly. Any experts have a better idea how I could place 8 logos spaced evenly in a row? perhaps creating a new 8 col custom grid?
我尝试了一些选项 - 2 列嵌套 4 列和 4 列嵌套 2 列......我遇到的问题是装订线在列之间创建了额外的间距，这意味着徽标不会均匀分布。有没有专家有更好的主意，我如何将 8 个徽标均匀地连续放置？也许创建一个新的 8 列自定义网格？
Any help would be great.
任何帮助都会很棒。
Thanks N
谢谢 N
回答by Zim
Bootstrap 3
引导程序 3
How about using a list-inlinewith 4 columns of 2 like this..
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>
Demo: http://bootply.com/90906
Bootstrap 4
引导程序 4
Since Bootstrap 4 is flexbox, any number of equal width columns is now possible using the auto-layout grid..
由于 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>
回答by BENARD Patrick
2 columns 6 with each 4 colums 3 inside row-fluid
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>
回答by Francis Booth
Extending on my answer here: https://stackoverflow.com/a/25023129/2266157
在这里扩展我的回答：https: //stackoverflow.com/a/25023129/2266157
Here is a demonstration of an eight-wide Bootstrap row structure, with
这是一个八宽的 Bootstrap 行结构的演示，具有
Equal padding (i.e. column gutters)...
相等的填充（即列装订线）...
<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 indeed no column gutters.
...或者确实没有列排水沟。
<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>
This CSS is required in addition to Bootstrap
除了 Bootstrap 还需要这个 CSS
.row.no-pad {
margin-right:0;
margin-left:0;
}
.row.no-pad > [class*='col-'] {
padding-right:0;
padding-left:0;
}
Here is a working demo:
http://www.bootply.com/eWWpj3G9tL
这是一个工作演示：http:
//www.bootply.com/eWWpj3G9tL
And the logo centring
和标志居中
To position the logos, I'd either use an <img class="img-responsive">or if they're smaller than the column width then you could CSS center them with text-align:center(or the bootstrap class text-centerplaced on the .col-*) or using the following CSS:
要定位徽标，我要么使用<img class="img-responsive">要么 如果它们小于列宽，那么您可以使用 CSS 将它们居中text-align:center（或text-center放置在 上的引导程序类.col-*）或使用以下 CSS：
#logos img {
display:block;
margin:0 auto;
}
回答by Sir Kettle
Sounds like this is for a specific module so I would just create a simple new grid for this...
听起来这是针对特定模块的，所以我只想为此创建一个简单的新网格......
.eightLogos .logo {
float: left;
width: 12.5%;
margin: 0;
padding: 0;
}
回答by Sagive SEO
Its Simple... Just add another column to your css.
Its best not to edit bootstrap CSS (and use a cdn).
它很简单...只需在您的 css 中添加另一列。
最好不要编辑引导 CSS（并使用 cdn）。
So... We need to create the column css for all screen types.
I usually address 3 screen sizes which means creating 3 css sets for this column
所以...我们需要为所有屏幕类型创建列 css。
我通常处理 3 个屏幕尺寸，这意味着为此列创建 3 个 css 集
- big screens & normal screens
- medium screens (ipad ext.)
- small screens (mobile phones ext.)
- 大屏和普通屏
- 中屏幕（ipad ext.）
- 小屏幕（手机分机）
Decision time:
Since we are talking about 8 columns which is a lot
its best to go with these css rules (in my opinion)
决策时间：
由于我们谈论的是 8 列，因此
最好使用这些 css 规则（在我看来）
i almost always use a .container class for my designs which
makes big screen mode suitable in tablet unless in portrait mode.
我几乎总是在我的设计中使用 .container 类，这
使得大屏幕模式适合平板电脑，除非在纵向模式下。
In short, Here are a good set of css rules
简而言之，这里有一套很好的 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;}
}
Please note:
i play around with padding as i see fit. Its best to leave some extra padding when in mobile mode but you can play around with it ;)
请注意：
我会在我认为合适的情况下使用填充。最好在移动模式下留下一些额外的填充，但你可以玩弄它;)
