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

【问题标题】：Bootstrap 5 columns per row on desktop, 3 on table, 2 on mobile?Bootstrap 在桌面上每行 5 列，在桌面上 3，在移动设备上 2？
【发布时间】：2021-04-20 05:20:27
【问题描述】：

我正在尝试在桌面上每行引导 5 列，在桌面上 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>

我该如何正确地做到这一点？谢谢！

【问题讨论】：

标签： html twitter-bootstrap twitter-bootstrap-3

【解决方案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>

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

【讨论】：

【解决方案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>

【讨论】：