Question

我需要在3行中显示9个元素（div），但该行在移动视图中只显示2个元素，我是如何制作的？

| elem_0 | elem_1 | elem_2 |   <--- on desktop
| elem_3 | elem_4 | elem_5 |

| elem_0 | elem_1 |
| elem_2 | elem_3 |     <--- on mobile view
| elem_4 | elem_5 |

Answer 1

要实现此目的，请使用多个col-*-*类，这些类定位较大的屏幕尺寸，例如md和lg，然后sm和xs更小的屏幕尺寸。在较大的屏幕尺寸下，您将定位col-*-4（1/3），在较小的屏幕尺寸下，您将定位col-*-6（1/2）。如果给定的Bootstrap row最终col-*-*总计超过12，它们将溢出到下一个可见行：

<div class="container">
    <div class="row">
        <div class="col-md-4 col-sm-6 col-xs-6">0</div>
        <div class="col-md-4 col-sm-6 col-xs-6">1</div>
        <div class="col-md-4 col-sm-6 col-xs-6">2</div>
        <div class="col-md-4 col-sm-6 col-xs-6">3</div>
        <div class="col-md-4 col-sm-6 col-xs-6">4</div>
        <div class="col-md-4 col-sm-6 col-xs-6">5</div>
    </div>
</div>

示例：

http://www.bootply.com/SSuDcf7RSh

您可能需要调整每个col-sm-6元素上的<div>以满足您的断点需求。不确定您考虑移动的px屏幕宽度。

如何使用3个元素创建一行并在移动视图Bootstrap中显示2

1 个答案: