html - 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 占据主要 Angular 色并且仍然显示为连续 3 个图像。

Answer 1

如果您查看可以找到的 Twitter Bootstrap 文档 here您会注意到有一些 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>