希望使用 bootstrap 在移动设备上垂直堆叠列

Question

当屏幕尺寸低于 600px 左右时，如何让这些列垂直堆叠？

我附上了一张 320 像素的图片（非常压扁）。

<div class="container-fluid">
    <div class="row justify-content-md-center">
        <div class="col-12 col-sm-4 offset-sm-2">
            <p></p>
        </div>

    <div class="row justify-content-md-center">
        <div class="col-12 col-sm-4 offset-sm-2">
            <p></p>
        </div>
    </div>

    <div class="row justify-content-md-center">
        <div class="col-12 col-sm-4 offset-sm-2">
            <p></p>
        </div>

    <div class="row justify-content-md-center">
        <div class="col-12 col-sm-4 offset-sm-2">
            <p></p>
        </div>
    </div>
</div>

感谢您的帮助。

Answer 1

该代码缺少几个结束 div 标记。您应该将列放在一行中，而不是每次都使用新行，因为您只使用了 Bootstrap 网格的 1/3。

<div class="container-fluid">
    <div class="row justify-content-md-center">
        <div class="col-12 col-sm-4">
            <div class="card card-block"></div>
        </div>
        <div class="col-12 col-sm-4">
            <div class="card card-block"></div>
        </div>
        <div class="col-12 col-sm-4">
            <div class="card card-block"></div>
        </div>
    </div>
</div>

http://www.codeply.com/go/0RCKNb2fvY

希望使用 bootstrap 在移动设备上垂直堆叠列

Looking to stack columns vertically on mobile devices using bootstrap

css

twitter-bootstrap

responsive