Question

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

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

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

这是我的标记：

＆＃13;

<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>

＆＃13;

Answer 1

我找到了一个关于此的最佳解决方案，我有这个问题，因为奇数列，所以我只是在左侧和右侧添加了一个跨栏列，在中间添加了工作列，它解决了我的问题！，这里是代码我做了什么。

<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并抵消col。

它并不完美，但它确实有效。您也需要制作过渡流体，但它应该可以帮助您将所有内容集中在一起 - 是

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

如何在bootstrap中使用奇数列

2 个答案: