在处理奇数列时,通常不能使<div>居中对齐。这是我的问题。
这是使用Bootstrap开发的。我希望所有的内部div都在中间。因此,当在其他设备上查看页面时,所有内容都是居中对齐的。当在md屏幕宽度处查看时,右侧有一点空间。
我想要三列mdlg宽度,两列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>

最佳答案

我已经找到了一个最好的解决方案,我有这个问题,因为奇数列,所以我只是添加了一个跨度列左右侧和工作列中间,它解决了我的问题!,这是我做的代码。

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

关于html - 如何在 bootstrap 中使用奇数列,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/27330845/

10-11 13:36