Bootstrap 在桌面设备上每行 5 列，在 table 上每行 3 列，在移动设备上每行 2 列？

Question

我想在桌面设备上每行 bootstrap 5 列，在 table 上每行 3 列，在移动设备上每行 2 列？

这是我当前的代码，运气不好：

<div class="row row-cols-5">
    <div class="col col-xs-6">
        R1
    </div>
    <div class="col col-xs-6">
        R2
    </div>
    <div class="col col-xs-6">
        R3
    </div>
    <div class="col col-xs-6">
        R4
    </div>
    <div class="col col-xs-6">
        R5
    </div>
</div>

如何正确执行此操作？谢谢！

Answer 1

<div class="row row-cols-lg-5">
    <div class="col-md-4 col-sm-6 col-6">
        1
    </div>
    <div class="col-md-4 col-sm-6 col-6">
        2
    </div>
    <div class="col-md-4 col-sm-6 col-6">
        3
    </div>
    <div class="col-md-4 col-sm-6 col-6">
        4
    </div>
    <div class="col-md-4 col-sm-6 col-6">
        5
    </div>
</div>

Answer 2

我觉得你可以这样做。

<div class="row row-cols-lg-5">
    <div class="col-md-4 col-sm-6 col-6">
        1
    </div>
    <div class="col-md-4 col-sm-6 col-6">
        2
    </div>
    <div class="col-md-4 col-sm-6 col-6">
        3
    </div>
    <div class="col-md-4 col-sm-6 col-6">
        4
    </div>
    <div class="col-md-4 col-sm-6 col-6">
        5
    </div>
</div>

有关 bootstrap 网格的更多信息，请参阅 bootstrap grid。

Bootstrap 在桌面设备上每行 5 列，在 table 上每行 3 列，在移动设备上每行 2 列？

Bootstrap 5 columns per row on desktop, 3 on table, 2 on mobile?

html

twitter-bootstrap

twitter-bootstrap-3