当它们是奇数时如何将Bootstrap列居中？ [英] How to center Bootstrap columns when they are an odd number?

问题描述

在这个滑块的每一个实例下，我都在使用Bootstrap创建一个图像滑块，并且遇到了一个我在脑海中似乎无法解决的问题。将有3列缩略图（每行4个）。但是，有些滑块不会有4个缩略图，有些会有1,2或3个。在这些情况下，我希望将缩略图水平居中，同时保持相同的15像素的排水沟，如果其中有4个。 / p>

现在当只有2个缩略图时，这很容易，因为我可以简单地在缩略图集之前和之后添加一个空的3列div。当只有一个缩略图时，我可以移除 float 并使用 margin：0 auto; 居中，但是我当有3个缩略图时，无法找出该做什么。

任何人都可以告诉我完成此操作的最佳方法是什么？我认为能够设置半列是很好的，所以我可以在缩略图之前和之后放置一个空的1.5列div。这是可行的吗？

以下是3个缩略图版本的示例代码：

 < div id =container> 
 
< div class =row> 
 
 <！ - 全尺寸图片 - > 
< div class =col-sm-12> 
< img src =http://placehold.it/960x300/> 
< / 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 class =col-sm-3> 
< img src =http://placehold.it/200x150/> 
< / div> 
 
< / div> 
 
< / div> 
  

我建立了一个Bootply，显示我如何解决1个缩略图和2个缩略图版本：

Bootply

解决方案

  .row.text-center> div {
 display：inline-block; 
 float：none; 
} 
 
< div class =row text-center> 
<！ - 滑块缩略图 - > 
< div class =col-sm-3> 
< img src =http://placehold.it/200x150> 
< / div> 
 ... 
< / div> 
  

演示

I am creating an image slider using Bootstrap and having an issue that I can't seem to solve in my head.

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.

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 float and use margin:0 auto; to center, but I can't figure out what to do when there are 3 thumbnails.

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?

Here's some sample code for the 3 thumbnail version:

<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

解决方案

.row.text-center > div {
    display: inline-block;
    float: none;
}

<div class="row text-center">
    <!-- Slider Thumbnails -->
    <div class="col-sm-3">
        <img src="http://placehold.it/200x150">
    </div>
    ...
</div>

Demo

这篇关于当它们是奇数时如何将Bootstrap列居中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！