bootstrap 4 响应式卡网格/阵列

Posted 2023-03-05

【中文标题】bootstrap 4 响应式卡网格/阵列

【英文标题】：bootstrap 4 responsive card grid/ array

【发布时间】：2019-07-03 00:31:32

【问题描述】：

我正在尝试做类似于 codepen 的 dashboard 的事情，或者如果您没有帐户，您可以查看 codepen 的 home screen。

我有一个动态的卡片列表，但我希望它具有响应性，并且行中的卡片数量随着视口大小而减少。

我认为引导程序可以帮助它，但我尝试过的所有方法都不起作用。请注意，卡片的数量可以动态变化

这是我目前得到的pen：

<div class="row">
    <div class="col-md-2 " style="margin-bottom:10px;">
        <div class="card card-default" >

            <button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
            <h3>Card</h3>
            <h6>Today</h6>
            <p><strong>5 Errors</strong></p>
            <p><strong>3 Warnings</strong></p>
            <p><strong>1 Info</strong></p>
        </div>
    </div>

    <div class="col-md-2 " style="margin-bottom:10px;">
        <div class="card edge-danger card-warning" >
            <button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
            <h3>Card</h3>
            <h6>Today</h6>
            <p><strong>5 Errors</strong></p>
            <p><strong>3 Warnings</strong></p>
            <p><strong>1 Info</strong></p>
        </div>
    </div>

    <div class="col-md-2 " style="margin-bottom:10px;">
        <div class="card edge-danger card-default" >
            <button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
            <h3>Card</h3>
            <h6>Today</h6>
            <p><strong>5 Errors</strong></p>
            <p><strong>3 Warnings</strong></p>
            <p><strong>1 Info</strong></p>
        </div>
    </div>

    <div class="col-md-2 " style="margin-bottom:10px;">
        <div class="card edge-danger card-danger" >
            <button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
            <h3>Card</h3>
            <h6>Today</h6>
            <p><strong>5 Errors</strong></p>
            <p><strong>3 Warnings</strong></p>
            <p><strong>1 Info</strong></p>
        </div>
    </div>

    <div class="col-md-2 " style="margin-bottom:10px;">
        <div class="card edge-danger card-white" >
            <button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
            <h3>Card</h3>
            <h6>Today</h6>
            <p><strong>5 Errors</strong></p>
            <p><strong>3 Warnings</strong></p>
            <p><strong>1 Info</strong></p>
        </div>
    </div>
    <div class="col-md-2 " style="margin-bottom:10px;">
        <div class="card edge-danger card-danger" >
            <button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
            <h3>Card</h3>
            <h6>Today</h6>
            <p><strong>5 Errors</strong></p>
            <p><strong>3 Warnings</strong></p>
            <p><strong>1 Info</strong></p>
        </div>
    </div>

    <div class="col-md-2 " style="margin-bottom:10px;">
        <div class="card edge-danger card-white" >
            <button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
            <h3>Card</h3>
            <h6>Today</h6>
            <p><strong>5 Errors</strong></p>
            <p><strong>3 Warnings</strong></p>
            <p><strong>1 Info</strong></p>
        </div>
    </div>
</div>

结果就是这样。

但是当我减小寡妇宽度时，比率会丢失，我希望它宁愿转到下一行等等....同时使用可用的全宽空间。

我想要做的是：

缩小...

进一步缩小...

【问题讨论】：

如果您希望网格列在某些断点处更改大小，您可以提供适当的类。即（这个col-md-2可以变成这个col-lg-2 col-md-4 col-sm-6

@zgood 好，但是如何保持高宽比？

嗯，您的帖子中没有关于保持纵横比的内容......这是一个完全不同的问题。您可以查看使用padding-top 来保持比率的css aspect ratio trick。

@zgood 我提到了它并添加了第二张图片来显示该问题，感谢链接我会检查它。

【参考方案1】：

使用 Bootstrap 的响应式断点。例如：

<div class="col-lg-2 col-md-3 col-6" style="margin-bottom:10px;">
      <div class="card card-default">
          ...
      </div>
</div>

演示：https://www.codeply.com/go/WfAaguTKos

【讨论】：

谢谢，但是如何防止卡片丢失高宽比呢？当屏幕变小时

【参考方案2】：

您可以使用多个 'col' 类，每个窗口大小一个

class="col-xs-6 col-sm-4 col-md-3 col-lg-2"

在此示例中，卡片将采用以下方式： 大屏幕 6 个，中屏幕 4 个，小屏幕 3 个，超小屏幕 2 个。