Question

如何以下列方式对齐两列：

当它们都在同一条线上时（当屏幕尺寸足够宽以将它们并排放置时）它们应该垂直对齐。较短的柱应位于较高的柱的中心。
当屏幕缩小以使它们一个放在另一个上面时，它们应该都是水平居中的。

我在一列（col-md-4）上使用了图像（img-responsive）的网格系统，而在另一列（h4）上使用了文本（col-md-8）。由于文本不像屏幕md或更高时的图像那么高，文本应该显示在它旁边的图像的垂直中心。但是在到达屏幕sm或xs之后，我希望它全部显示在容器的水平中心。

<div class="container-fluid">
<div class="row">
   <div class="col-md-4"><img class="center-block img-responsive" src="foo.png" alt="foo" width="190" height="160" /></div>
   <div class="col-md-8">
      <h3>Foo image description</h3>
   </div>
</div>

感谢您的建议

以下是样本： http://jsbin.com/lisetahupa/edit?html,output

Answer 1

你正在使用2个字体，它被用来用于桌面，一个用于移动设备，试试这个课程col-md-4 col-xs-2

Bootstrap - 对齐列

1 个答案: