在处理奇数列时,通常不能使<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>
最佳答案
我已经找到了一个最好的解决方案,我有这个问题,因为奇数列,所以我只是添加了一个跨度列左右侧和工作列中间,它解决了我的问题!,这是我做的代码。
<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/