Question

我正在尝试执行与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>

，结果就是这样。

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

这是要做的：

按比例缩小...

进一步缩小...

Answer 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

Answer 2

您可以使用许多“ col”类，每种用于窗口的大小

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

在此示例中，卡片将采用以下方式：在大屏幕上显示6个，在中型屏幕上显示4个，在小屏幕上显示3个，在非常小的屏幕上显示2个。

bootstrap 4响应式卡网格/阵列

2 个答案: