twitter-bootstrap 当 Bootstrap 列是奇数时如何将它们居中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28683329/
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 center Bootstrap columns when they are an odd number?
提问by user13286
I am creating an image slider using Bootstrap and having an issue that I can't seem to solve in my head.
我正在使用 Bootstrap 创建一个图像滑块，但遇到了一个我似乎无法解决的问题。
Under each instance of this slider, I will have 3-column thumbnails(4 per row). However, some of the sliders will not have 4 thumbnails, some will have 1, 2 or 3. In these instances I would like to center the thumbnails horizontally, while maintaining the same 15px gutter they would have if there were 4 of them.
在此滑块的每个实例下，我将有 3 列缩略图（每行 4 个）。但是，有些滑块不会有 4 个缩略图，有些将有 1、2 或 3 个。在这些情况下，我希望将缩略图水平居中，同时保持与 4 个缩略图相同的 15 像素间距。
Now when there are only 2 thumbnail images, this is easy, because I can simply add an empty 3-column div before and after the set of the thumbnails. When there is only 1 thumbnail, I can remove the floatand use margin:0 auto;to center, but I can't figure out what to do when there are 3 thumbnails.
现在当只有 2 个缩略图时，这很容易，因为我可以简单地在缩略图集之前和之后添加一个空的 3 列 div。当只有 1 个缩略图时，我可以删除float并用于margin:0 auto;居中，但是当有 3 个缩略图时我不知道该怎么做。
Can anyone tell me what the best way to accomplish this would be? I was thinking it would be nice to be able to set up half columns so I could just put an empty 1.5-column div before and after the thumbnails. Is this feasible?
谁能告诉我实现这一目标的最佳方法是什么？我认为能够设置半列会很好，这样我就可以在缩略图前后放置一个空的 1.5 列 div。这可行吗？
Here's some sample code for the 3 thumbnail version:
以下是 3 个缩略图版本的一些示例代码：
<div id="container">
<div class="row">
<!-- Full Size Image -->
<div class="col-sm-12">
<img src="http://placehold.it/960x300" />
</div>
<!-- Slider Thumbnails -->
<div class="col-sm-3">
<img src="http://placehold.it/200x150" />
</div>
<div class="col-sm-3">
<img src="http://placehold.it/200x150" />
</div>
<div class="col-sm-3">
<img src="http://placehold.it/200x150" />
</div>
</div>
</div>
And I've set up a Bootply that shows how I solved for the 1 thumbnail and 2 thumbnail versions:
我已经设置了一个 Bootply，它显示了我如何解决 1 个缩略图和 2 个缩略图版本：
Bootply
引导
回答by isherwood
回答by Zim
Bootstrap 4: Center Odd Columns
Bootstrap 4：中心奇数列
I know the original question was Bootstrap 3.x timeframe, but now that 4.x is available centering odd numbers of columns is easier. Here's an example of 5 equal, full-width columns (no extra CSS) using the new auto-layout grid..
我知道最初的问题是 Bootstrap 3.x 时间范围，但现在 4.x 可用，将奇数列居中更容易。这是使用新的自动布局网格的 5 个相等的全宽列（没有额外的 CSS）的示例..
<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>
</div>
http://www.codeply.com/go/MJTglTsq9h
http://www.codeply.com/go/MJTglTsq9h
This solution works because Bootstrap 4 is now flexbox, and also works for any number of odd columnsacross the viewport.
此解决方案有效，因为 Bootstrap 4 现在是 flexbox，并且也适用于视口中任意数量的奇数列。
You can also center the "classic grid" columns that have defined width using justify-content-centeron the row. For example, 5 col-sm-2columns...
您还可以将已定义宽度的“经典网格”列居中justify-content-center。例如，5col-sm-2列...
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-sm-2">
</div>
<div class="col-sm-2">
</div>
<div class="col-sm-2">
</div>
<div class="col-sm-2">
</div>
<div class="col-sm-2">
</div>
</div>
</div>
回答by myDoggyWritesCode
In my case, div has class col-xs-11. So, added following css to make it perfectly in center for small screens. Note: setting floatand marginare important.
就我而言， div 有 class col-xs-11。因此，添加了以下 css 以使其完美地位于小屏幕的中心。注意：设置float和margin很重要。
padding-left:0;
padding-right:0;
float:none;
margin:auto
