水平居中使用奇数跨度宽度的Bootstrap元素(Horizontally centering Bootstrap elements that use the an odd span width)

水平居中使用奇数跨度宽度的Bootstrap元素(Horizontally centering Bootstrap elements that use the an odd span width)

这似乎是Bootstrap社区中的一个常见问题，例如，中心和类的过程具有跨度宽度的奇数， class="span3" 。 我有一个包含三个.span3类的.span3 。 我意识到使用三个span4类会更容易，但我并不喜欢它有多大的元素。

到目前为止，我尝试了一些方法：

我已经创建了一个自定义的15列网格，所以我可以在我实际想要使用的三个元素之前和之后给出一个.span3类，但是当.span3 responsive-bootstrap.css启动时，事情.span3奇怪，因为响应文件处理的是12列网格。

我已经尝试将所有内容放在使用以下CSS的自定义.center类中：

.center { float: none; margin: 0 auto; text-align: center; }

值得一提的是，当浏览器宽度介于~980px - ~1199px之间时，一切正常。

必须有一种简单的方法来解决这个问题，对吧？ 我也不担心它在旧浏览器上看起来不错，这是一个个人网站。 这是我目前所处的位置，使用15列网格：

这是我的JSFiddle

HTML：

<div class="row"> <div class="center"> <ul class="thumbnails" id="portfolio-links"> <li class="span3"></li> <li class="span3" id="item1"> <a href="#" class="thumbnail" id="portfolio-element"></a> </li> <li class="span3" id="item2"> <a href="#" class="thumbnail" id="portfolio-element"></a> </li> <li class="span3" id="item3"> <a href="#" class="thumbnail" id="portfolio-element"></a> </li> <li class="span3"></li> </ul><!--/.thumbnails--> </div><!--/.center--> </div><!--/.row-->

CSS：

#portfolio-links { display: block; margin: 0 auto; float: none; } .center { float: none; margin: 0 auto; text-align: center; }

This seems to be a common problem in the Bootstrap community, the process of centering and class with an odd number for the span width, class="span3" for example. I have a .row with three .span3 classes inside it. I realize it would be easier to just use three span4 classes, but I'm not a fan of how large it makes my elements.

I've tried a few things so far:

I've created a custom 15-column grid so I could give a .span3 class before and after the three elements I actually want to use, however when responsive-bootstrap.css kicks in, things act strange because the responsive file deals with a 12-column grid.

I've tried placing everything in a custom .center class which uses the following CSS:

.center { float: none; margin: 0 auto; text-align: center; }

For what it's worth, everything works when my browser width is between ~980px - ~1199px.

There has to be a simple way to fix this problem, right? I'm not worried about it looking good on older browsers either, this is a personal site. Here is where I'm currently at, working with a 15-column grid:

Here is my JSFiddle

The HTML:

<div class="row"> <div class="center"> <ul class="thumbnails" id="portfolio-links"> <li class="span3"></li> <li class="span3" id="item1"> <a href="#" class="thumbnail" id="portfolio-element"></a> </li> <li class="span3" id="item2"> <a href="#" class="thumbnail" id="portfolio-element"></a> </li> <li class="span3" id="item3"> <a href="#" class="thumbnail" id="portfolio-element"></a> </li> <li class="span3"></li> </ul><!--/.thumbnails--> </div><!--/.center--> </div><!--/.row-->

The CSS:

#portfolio-links { display: block; margin: 0 auto; float: none; } .center { float: none; margin: 0 auto; text-align: center; }

最满意答案

你只需要使用span9的大小制作<div class="center">并删除额外的li 。

最终结果将是： http ： //jsfiddle.net/AKWqP/

You just have to make the <div class="center"> with a size of span9 and remove the extra li.

The final result will be: http://jsfiddle.net/AKWqP/

水平居中使用奇数跨度宽度的Bootstrap元素(Horizontally centering Bootstrap elements that use the an odd span width)

这似乎是Bootstrap社区中的一个常见问题，例如，中心和类的过程具有跨度宽度的奇数， class="span3" 。 我有一个包含三个.span3类的.span3 。 我意识到使用三个span4类会更容易，但我并不喜欢它有多大的元素。

到目前为止，我尝试了一些方法：

我已经创建了一个自定义的15列网格，所以我可以在我实际想要使用的三个元素之前和之后给出一个.span3类，但是当.span3 responsive-bootstrap.css启动时，事情.span3奇怪，因为响应文件处理的是12列网格。

我已经尝试将所有内容放在使用以下CSS的自定义.center类中：

.center { float: none; margin: 0 auto; text-align: center; }

值得一提的是，当浏览器宽度介于~980px - ~1199px之间时，一切正常。

必须有一种简单的方法来解决这个问题，对吧？ 我也不担心它在旧浏览器上看起来不错，这是一个个人网站。 这是我目前所处的位置，使用15列网格：

这是我的JSFiddle

HTML：

<div class="row"> <div class="center"> <ul class="thumbnails" id="portfolio-links"> <li class="span3"></li> <li class="span3" id="item1"> <a href="#" class="thumbnail" id="portfolio-element"></a> </li> <li class="span3" id="item2"> <a href="#" class="thumbnail" id="portfolio-element"></a> </li> <li class="span3" id="item3"> <a href="#" class="thumbnail" id="portfolio-element"></a> </li> <li class="span3"></li> </ul><!--/.thumbnails--> </div><!--/.center--> </div><!--/.row-->

CSS：

#portfolio-links { display: block; margin: 0 auto; float: none; } .center { float: none; margin: 0 auto; text-align: center; }

This seems to be a common problem in the Bootstrap community, the process of centering and class with an odd number for the span width, class="span3" for example. I have a .row with three .span3 classes inside it. I realize it would be easier to just use three span4 classes, but I'm not a fan of how large it makes my elements.

I've tried a few things so far:

I've created a custom 15-column grid so I could give a .span3 class before and after the three elements I actually want to use, however when responsive-bootstrap.css kicks in, things act strange because the responsive file deals with a 12-column grid.

I've tried placing everything in a custom .center class which uses the following CSS:

.center { float: none; margin: 0 auto; text-align: center; }

For what it's worth, everything works when my browser width is between ~980px - ~1199px.

There has to be a simple way to fix this problem, right? I'm not worried about it looking good on older browsers either, this is a personal site. Here is where I'm currently at, working with a 15-column grid:

Here is my JSFiddle

The HTML:

<div class="row"> <div class="center"> <ul class="thumbnails" id="portfolio-links"> <li class="span3"></li> <li class="span3" id="item1"> <a href="#" class="thumbnail" id="portfolio-element"></a> </li> <li class="span3" id="item2"> <a href="#" class="thumbnail" id="portfolio-element"></a> </li> <li class="span3" id="item3"> <a href="#" class="thumbnail" id="portfolio-element"></a> </li> <li class="span3"></li> </ul><!--/.thumbnails--> </div><!--/.center--> </div><!--/.row-->

The CSS:

#portfolio-links { display: block; margin: 0 auto; float: none; } .center { float: none; margin: 0 auto; text-align: center; }

最满意答案

你只需要使用span9的大小制作<div class="center">并删除额外的li 。

最终结果将是： http ： //jsfiddle.net/AKWqP/

You just have to make the <div class="center"> with a size of span9 and remove the extra li.

The final result will be: http://jsfiddle.net/AKWqP/