如何在引导程序中处理奇数列

Question

通常，在处理奇数列时，我们无法使<div>中心对齐。这是我的问题。

这是使用Bootstrap开发的。我希望所有内部div都在中心。因此，当在其他设备上查看页面时，所有内容都是居中对齐的。以屏幕宽度查看md右侧有一点空间。

我想要三列的宽度md和lg，两列的宽度sm，一列的宽度xs。在所有视口上，它应居中对齐。

这是我的标记：

<div class="container-fluid">
<div class="row-fluid">
<div class="fleet_bor col-lg-4 col-md-4 col-sm-4 col-xs-12 col-centered">
	<a href="http://someurl.com/gulfstream-iii/">
    	<img class="img-responsive" src="http://someurl.com/wp-content/uploads/2014/11/III-01-300x240.jpg" />
    </a>
    <h4>Gulfstream III</h4>
</div>
<div class="fleet_bor col-lg-4 col-md-4 col-sm-4 col-xs-12">
	<a href="http://someurl.com/gulfstream-iv-sp-1/">
    	<img class="img-responsive" src="http://someurl.com/wp-content/uploads/2014/11/V2-1-300x240.jpg" />
    </a>
    <h4>Gulfstream V2</h4>
</div>

<div class="fleet_bor col-lg-4 col-md-4 col-sm-4 col-xs-12">
	<a href="http://someurl.com/gulfstream-iv-sp-1/">
    	<img class="img-responsive" src="http://someurl.com/wp-content/uploads/2014/11/FLEET_SP1.jpg" />
    </a>
    <h4>Gulfstream SP1</h4>
</div>
<div>
</div>

Answer 1

我已经找到了最好的解决方案，由于列数奇数，我遇到了这个问题，所以我只是在左右两侧添加一个 span 列，在中间添加工作列，它解决了我的问题！，这是我所做的代码。

<div class="entry-content">
						<div class="col-lg-1 col-md-1 col-sm-1 hidden-xs"></div>
<div class="col-lg-10 col-md-10 col-sm-11 col-xs-12 moile_fix_">
<div class="fleet_bor col-lg-4 col-md-4 col-sm-6 col-xs-12">
	<a href="http://someurl.com/gulfstream-iii/">
    	<img class="img-responsive" src="http://someurl.com/wp-content/uploads/2014/11/III-01-300x240.jpg">
    </a>
    <h4>Gulfstream III</h4>
</div>
<div class="fleet_bor col-lg-4  col-lg-offset-0 col-md-4 col-md-offset-2 col-sm-4 col-sm-offset-0 col-xs-12  col-xs-offset-0">
	<a href="http://someurl.com/gulfstream-iv-sp-1/">
    	<img class="img-responsive" src="http://someurl.com/wp-content/uploads/2014/11/V2-1-300x240.jpg">
    </a>
    <h4>Gulfstream V2</h4>
</div>
<div class="fleet_bor col-lg-4 col-md-4 col-sm-6 col-xs-12">
	<a href="http://someurl.com/gulfstream-iv-sp-1/">
    	<img class="img-responsive" src="http://someurl.com/wp-content/uploads/2014/11/FLEET_SP1.jpg">
    </a>
    <h4>Gulfstream SP1</h4>
</div>
<div class="fleet_bor col-lg-4  col-lg-offset-0 col-md-4 col-md-offset-2 col-sm-4 col-sm-offset-0 col-xs-12  col-xs-offset-0">
	<a href="http://someurl.com/gulfstream-g550/">
    	<img class="img-responsive" src="http://someurl.com/wp-content/uploads/2014/11/G5500-1-300x244.jpg">
    </a>
    <h4>Gulfstream G550</h4>
</div>
<div class="fleet_bor col-lg-4 col-md-4 col-sm-6 col-xs-12">
	<a href="http://someurl.com/gulfstream-v1/">
    	<img class="img-responsive" src="http://someurl.com/wp-content/uploads/2014/11/V1-1-300x240.jpg">
    </a>
    <h4>Gulfstream V1</h4>
</div>
<div class="fleet_bor col-lg-4  col-lg-offset-0 col-md-4 col-md-offset-2 col-sm-4 col-sm-offset-0 col-xs-12  col-xs-offset-0">
	<a href="http://someurl.com/gulfstream-iv-sp-2/">
    	<img class="img-responsive" src="http://someurl.com/wp-content/uploads/2014/11/FLEET_SP2.jpg">
    </a>
    <h4>Gulfstream SP2</h4>
</div>
<div class="fleet_bor col-lg-4 col-md-4 col-sm-6 col-xs-12">
	<a href="http://someurl.com/gulfstream-iv-sp-3/">
    	<img class="img-responsive" src="http://someurl.com/wp-content/uploads/2014/11/FLEET-SP3.jpg">
    </a>
    <h4>Gulfstream SP3</h4>
</div>
</div>
<div class="col-lg-1 col-md-1 hidden-sm hidden-xs"></div>
</div>

Answer 2

换行外部div 并偏移列。

它并不完美，但它有效。您还需要使过渡流体，但它应该可以帮助您使所有内容都集中起来。

http://getbootstrap.com/css/#grid-offsetting