Bootstrap中画面布局错误

Question

我试图为中型屏幕制作此布局，其中黑盒子是我的容器，红色/蓝色盒子位于两个不同的div中，如下所示：

<div class="col-sm-6">
    <ul>
        <li>
             image
        </li>
        <li>
             image
        </li>
        <li>
             image
        </li>
    </ul>
<div class="col-sm-6">
    <ul>
        <li>
             image
        </li>
        <li class="hidden-md hidden-sm hidden-xs">
             image
        </li>
    </ul>
</div>

所以大屏幕效果不错，但是媒体屏幕效果不好，我希望第一个div扮演主要角色，并且仍然连续显示3个图像。

Answer 1

如果你看一下可以找到here的twitter bootstrap文档，你会发现有一些CSS类可以为不同的设备大小指定不同的列。

使用此处提供的信息，您应该能够在布局中添加适当的类，以便布局能够按照您希望的方式响应设备大小。

修改

删除<ul>和<li>，然后将其替换为：

<div class="row">
    <div class="col-md-4">...Image...</div>
    <div class="col-md-4">...Image...</div>
    <div class="col-md-4">...Image...</div>
</div>