我有一个带有主引导板的页面,在这个面板中我有另一个面板.目标是在主要面板内部有多个嵌套面板,创建看起来类似于图库的东西.
我能够创建内容,此时它是响应式的,在必要时调整每行的嵌套面板数量及其大小.
然而,内部面板具有应居中的图像.我尝试将图像放在带有类容器的div中.但是,当我这样做时,在某些屏幕尺寸下,图像最终会在内部面板之外.
这是我的HTML(为简单起见,只有2个内部面板)：
<div id="mainContainer" class="container">
<div class="panel panel-default">
<div class="panel-heading">Panel Title</div>
<div class="panel-body">
<div class="row">
<!--BEGIN OF ITEM 1 -->
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="panel panel-default">
<div class="panel-heading">Item 01</div>
<div class="panel-body"><img src="http://placehold.it/150x150" alt="" class="img-responsive" />
</div>
</div>
<!--END OF ITEM 1 -->
<!--BEGIN OF ITEM 2 -->
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="panel panel-default">
<div class="panel-heading">Item 02</div>
<div class="panel-body"><img src="http://placehold.it/150x150" alt="" class="img-responsive" />
</div>
</div>
<!--END OF ITEM 2 -->
</div>
</div>
</div>
</div>
jsfiddle在这里：http://jsfiddle.net/9LFKV/
如果您调整浏览器的大小,您会看到内部面板在某些时候的宽度增加但图像保持对齐.
在这种情况下,如何将图像置于中心而不破坏其他所有内容？
解决方法
Twitter引导程序的辅助类为
center-block,您可以使用它来水平对齐元素,如下所示：
<img src="http://placehold.it/150x150" class="img-responsive center-block">
您还可以使用text-center类作为父元素以对齐其内联元素.
