引导程序-移动大小每行抽两张卡片

Question

在移动版本中，我需要绘制一个行列表，每行两张卡片。每张卡必须有3行（25％，50％和25％），其中第一行必须有2个单元格（75％/ 25％）。

一个移动屏幕必须容纳3行。

我已尝试执行此操作，但我无法执行此操作。 https://www.codeply.com/p/cL9RcBUMtL

非常感谢您

Answer 1

代替使用Card-deck，只需简单地使用行（仅）并将“最小高度” 更改为“高度：100vh”

然后连续进入两张卡，请尝试在移动屏幕上使用“ col-6” 。

通过此操作，您可以实现“移动屏幕上每2张卡有3行” ，对于其他响应式，可将col-sm-4用于中间屏幕，并将col-md-3用于其余的视图。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
<div class="row" style="height: 100vh">
    <div class="card col-6 col-sm-4 col-md-3 my-3">
        <div class="row h-25">
            <table class="h-100 w-100">
                <tbody>
                    <tr>
                        <td class="w-100 col-6 text-center font-weight-bold align-middle">
                            <h4 class="card-title text-center" style="font-size: 250%">TITULO</h4>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="row h-50">
            <table class="h-100 w-100">
                <tbody>
                    <tr>
                        <td class="w-100 col-6 text-center bg-danger font-weight-bold align-middle">50</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="row h-25">
            <table class="h-100 w-100">
                <tbody>
                    <tr>
                        <td class="w-75 col-6 text-center bg-success font-weight-bold align-middle">75</td>
                        <td class="w-25 col-6 text-center bg-danger font-weight-bold align-middle">25</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="card col-6 col-sm-4 col-md-3 my-3">
        <div class="row h-25">
            <table class="h-100 w-100">
                <tbody>
                    <tr>
                        <td class="w-100 col-6 text-center font-weight-bold align-middle">
                            <h4 class="card-title text-center" style="font-size: 250%">TITULO</h4>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="row h-50">
            <table class="h-100 w-100">
                <tbody>
                    <tr>
                        <td class="w-100 col-6 text-center bg-danger font-weight-bold align-middle">50</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="row h-25">
            <table class="h-100 w-100">
                <tbody>
                    <tr>
                        <td class="w-75 col-6 text-center bg-success font-weight-bold align-middle">75</td>
                        <td class="w-25 col-6 text-center bg-danger font-weight-bold align-middle">25</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="card col-6 col-sm-4 col-md-3 my-3">
        <div class="row h-25">
            <table class="h-100 w-100">
                <tbody>
                    <tr>
                        <td class="w-100 col-6 text-center font-weight-bold align-middle">
                            <h4 class="card-title text-center" style="font-size: 250%">TITULO</h4>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="row h-50">
            <table class="h-100 w-100">
                <tbody>
                    <tr>
                        <td class="w-100 col-6 text-center bg-danger font-weight-bold align-middle">50</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="row h-25">
            <table class="h-100 w-100">
                <tbody>
                    <tr>
                        <td class="w-75 col-6 text-center bg-success font-weight-bold align-middle">75</td>
                        <td class="w-25 col-6 text-center bg-danger font-weight-bold align-middle">25</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="card col-6 col-sm-4 col-md-3 my-3">
        <div class="row h-25">
            <table class="h-100 w-100">
                <tbody>
                    <tr>
                        <td class="w-100 col-6 text-center font-weight-bold align-middle">
                            <h4 class="card-title text-center" style="font-size: 250%">TITULO</h4>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="row h-50">
            <table class="h-100 w-100">
                <tbody>
                    <tr>
                        <td class="w-100 col-6 text-center bg-danger font-weight-bold align-middle">50</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="row h-25">
            <table class="h-100 w-100">
                <tbody>
                    <tr>
                        <td class="w-75 col-6 text-center bg-success font-weight-bold align-middle">75</td>
                        <td class="w-25 col-6 text-center bg-danger font-weight-bold align-middle">25</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="card col-6 col-sm-4 col-md-3 my-3">
        <div class="row h-25">
            <table class="h-100 w-100">
                <tbody>
                    <tr>
                        <td class="w-100 col-6 text-center font-weight-bold align-middle">
                            <h4 class="card-title text-center" style="font-size: 250%">TITULO</h4>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="row h-50">
            <table class="h-100 w-100">
                <tbody>
                    <tr>
                        <td class="w-100 col-6 text-center bg-danger font-weight-bold align-middle">50</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="row h-25">
            <table class="h-100 w-100">
                <tbody>
                    <tr>
                        <td class="w-75 col-6 text-center bg-success font-weight-bold align-middle">75</td>
                        <td class="w-25 col-6 text-center bg-danger font-weight-bold align-middle">25</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="card col-6 col-sm-4 col-md-3 my-3">
        <div class="row h-25">
            <table class="h-100 w-100">
                <tbody>
                    <tr>
                        <td class="w-100 col-6 text-center font-weight-bold align-middle">
                            <h4 class="card-title text-center" style="font-size: 250%">TITULO</h4>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="row h-50">
            <table class="h-100 w-100">
                <tbody>
                    <tr>
                        <td class="w-100 col-6 text-center bg-danger font-weight-bold align-middle">50</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="row h-25">
            <table class="h-100 w-100">
                <tbody>
                    <tr>
                        <td class="w-75 col-6 text-center bg-success font-weight-bold align-middle">75</td>
                        <td class="w-25 col-6 text-center bg-danger font-weight-bold align-middle">25</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
</div>