响应式设计：使用Bootstrap实现小屏幕每行显示2张卡片

要实现小屏幕（sm断点）每行显示2张卡片，只需将卡片容器的col-sm-4类替换为col-sm-6即可。

原理说明 #

Bootstrap栅格系统基于12列布局：

• 大屏（md及以上）使用col-md-2，每列占2份宽度，每行可容纳6张卡片（你当前代码仅放置4个，因此显示4张）；
• 小屏幕要每行2张，每列需占6份宽度（12÷2=6），对应类名col-sm-6。

修改后的代码 #

<div class="row">
    <div class="col-md-2 col-sm-6 item mt-3">
        <div class="card item-card card-block">
            <img src="~/img/deprt-8.png" style="max-width: 100%; ">
            <h5 class="item-card-title my-2">Internal/Family Medicine </h5>
        </div>
    </div>
    <div class="col-md-2 col-sm-6 item mt-3">
        <div class="card item-card card-block">
            <img src="~/img/deprt-10.png" style="max-width: 100%; ">
            <h5 class="item-card-title my-2">Pulmonology </h5>
        </div>
    </div>
    <div class="col-md-2 col-sm-6 item mt-3">
        <div class="card item-card card-block">
            <img src="~/img/deprt-11.png" style="max-width: 100%; ">
            <h5 class="item-card-title my-2">Gastroenterology</h5>
        </div>
    </div>
    <div class="col-md-2 col-sm-6 item mt-3">
        <div class="card item-card card-block">
            <img src="~/img/deprt-1.png" style="max-width: 100%; ">
            <h5 class="item-card-title my-2">Dentistry</h5>
        </div>
    </div>
</div>

内容的提问来源于stack exchange，提问作者Zahab Abbas