html - 对齐两列 Twitter Bootstrap 3

Question

使用 Twitter Bootstrap 3，我有两列，一列包含图像，另一列包含文本。我试图将两者并排放置以供桌面查看，但对于较小的屏幕(手机、平板电脑)，文本必须位于图像下方。我尝试了各种 float 和 positions css 但没有成功。

代码:

                        <div class="row">
                            <h2>History</h2>
                                <div class="col-md-6">
                                    <img class="img-rounded" src="img/fldry-ban.png"/>
                                        </div>
                        <div class="col-md-6">
                            <p> text  </p>
                                </div>
                                    </div>
                                        </div>

如果有人有时间提供我应该使用的 CSS 的一些细节，我将不胜感激。 :-)

Answer 1

现在您只是告诉浏览器:“嘿，如果我在中等屏幕设备上 (col-md-6) 让我们从 12 个 block 中取出 6 个用于显示!”

您还需要为移动 View 添加类:

<div class="col-md-6 col-sm-12">

所以现在，移动浏览器也知道，他应该使用完整的 12 个 block 来显示。

有关如何使用 bootstrap 的网格系统的更多信息，请查看 this .