css - 如何在 Bootstrap 4 中创建卡片库？

Question

我想要按行排列的 Bootstrap 卡片列表/图库，当行已满时转到下一行。 float-left 可以实现一些东西，平均分配左右边距。事先不知道会有多少张卡片。

这是目前的内容

<div class="card-deck mx-2" style="width: 100rem">
    <!-- Cards come here -->
</div>

卡片(循环生成)

<div class="card mx-auto text-center">
    <a href="[some url]"><img class="card-img-top" src="[some image]" alt="[some title]"></a>
    <div class="card-body">
        <h2 class="card-title"><span class="fa fa-[some FontAwesome icon]"></span> <a href="[some url]">[some title]</a></h2>
    </div>
</div>

CSS

h2 a {
    color:#000;
    font-size:0.6em;
    font-weight:bold;
}

.card-deck .card{
    max-width:320px;
}

目前它们都在一行中，当行被填充时它们的宽度(而不是高度)会减少。为简单起见，我正在寻找一种所有卡片都采用相同编码的设计。我想，也许我遗漏了有关 Bootstrap 4 的一些信息。

Answer 1

根据我们的谈话，您对 Bootstrap 还很陌生。您提到需要对列/元素的数量做出假设才能使用 Bootstrap 网格，但这不一定是真的。

当 Bootstrap 遇到超过 12 的列时，它只是将这些列移动到新行。考虑到这一点，我们可以使用 Bootstrap 4 中的边距实用程序并确保每一列都有底部边距；创建一个没有任何循环的网格库或指定新行的开始时间/位置。

<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script type='text/javascript' src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">

<div class="container-fluid">
  <div class="row">
  
    <div class="col-6 col-md-4 col-lg-3 mb-4">
      <div class="card mx-auto text-center">
        <a href="#url"><img class="card-img-top" src="http://placehold.it/350x350" alt="Sample Title"></a>
        <div class="card-body">
          <h2 class="card-title"><span class="fa fa-external-link mr-1"></span><a href="#url">Sample Title</a></h2>
        </div>
      </div>
    </div>

    <div class="col-6 col-md-4 col-lg-3 mb-4">
      <div class="card mx-auto text-center">
        <a href="#url"><img class="card-img-top" src="http://placehold.it/350x350" alt="Sample Title"></a>
        <div class="card-body">
          <h2 class="card-title"><span class="fa fa-external-link mr-1"></span><a href="#url">Sample Title</a></h2>
        </div>
      </div>
    </div>

    <div class="col-6 col-md-4 col-lg-3 mb-4">
      <div class="card mx-auto text-center">
        <a href="#url"><img class="card-img-top" src="http://placehold.it/350x350" alt="Sample Title"></a>
        <div class="card-body">
          <h2 class="card-title"><span class="fa fa-external-link mr-1"></span><a href="#url">Sample Title</a></h2>
        </div>
      </div>
    </div>

    <div class="col-6 col-md-4 col-lg-3 mb-4">
      <div class="card mx-auto text-center">
        <a href="#url"><img class="card-img-top" src="http://placehold.it/350x350" alt="Sample Title"></a>
        <div class="card-body">
          <h2 class="card-title"><span class="fa fa-external-link mr-1"></span><a href="#url">Sample Title</a></h2>
        </div>
      </div>
    </div>

    <div class="col-6 col-md-4 col-lg-3 mb-4">
      <div class="card mx-auto text-center">
        <a href="#url"><img class="card-img-top" src="http://placehold.it/350x350" alt="Sample Title"></a>
        <div class="card-body">
          <h2 class="card-title"><span class="fa fa-external-link mr-1"></span><a href="#url">Sample Title</a></h2>
        </div>
      </div>
    </div>

    <div class="col-6 col-md-4 col-lg-3 mb-4">
      <div class="card mx-auto text-center">
        <a href="#url"><img class="card-img-top" src="http://placehold.it/350x350" alt="Sample Title"></a>
        <div class="card-body">
          <h2 class="card-title"><span class="fa fa-external-link mr-1"></span><a href="#url">Sample Title</a></h2>
        </div>
      </div>
    </div>

    <div class="col-6 col-md-4 col-lg-3 mb-4">
      <div class="card mx-auto text-center">
        <a href="#url"><img class="card-img-top" src="http://placehold.it/350x350" alt="Sample Title"></a>
        <div class="card-body">
          <h2 class="card-title"><span class="fa fa-external-link mr-1"></span><a href="#url">Sample Title</a></h2>
        </div>
      </div>
    </div>

    <div class="col-6 col-md-4 col-lg-3 mb-4">
      <div class="card mx-auto text-center">
        <a href="#url"><img class="card-img-top" src="http://placehold.it/350x350" alt="Sample Title"></a>
        <div class="card-body">
          <h2 class="card-title"><span class="fa fa-external-link mr-1"></span><a href="#url">Sample Title</a></h2>
        </div>
      </div>
    </div>

    <div class="col-6 col-md-4 col-lg-3 mb-4">
      <div class="card mx-auto text-center">
        <a href="#url"><img class="card-img-top" src="http://placehold.it/350x350" alt="Sample Title"></a>
        <div class="card-body">
          <h2 class="card-title"><span class="fa fa-external-link mr-1"></span><a href="#url">Sample Title</a></h2>
        </div>
      </div>
    </div>

    <div class="col-6 col-md-4 col-lg-3 mb-4">
      <div class="card mx-auto text-center">
        <a href="#url"><img class="card-img-top" src="http://placehold.it/350x350" alt="Sample Title"></a>
        <div class="card-body">
          <h2 class="card-title"><span class="fa fa-external-link mr-1"></span><a href="#url">Sample Title</a></h2>
        </div>
      </div>
    </div>

    <div class="col-6 col-md-4 col-lg-3 mb-4">
      <div class="card mx-auto text-center">
        <a href="#url"><img class="card-img-top" src="http://placehold.it/350x350" alt="Sample Title"></a>
        <div class="card-body">
          <h2 class="card-title"><span class="fa fa-external-link mr-1"></span><a href="#url">Sample Title</a></h2>
        </div>
      </div>
    </div>

    <div class="col-6 col-md-4 col-lg-3 mb-4">
      <div class="card mx-auto text-center">
        <a href="#url"><img class="card-img-top" src="http://placehold.it/350x350" alt="Sample Title"></a>
        <div class="card-body">
          <h2 class="card-title"><span class="fa fa-external-link mr-1"></span><a href="#url">Sample Title</a></h2>
        </div>
      </div>
    </div>

    <div class="col-6 col-md-4 col-lg-3 mb-4">
      <div class="card mx-auto text-center">
        <a href="#url"><img class="card-img-top" src="http://placehold.it/350x350" alt="Sample Title"></a>
        <div class="card-body">
          <h2 class="card-title"><span class="fa fa-external-link mr-1"></span><a href="#url">Sample Title</a></h2>
        </div>
      </div>
    </div>

    <div class="col-6 col-md-4 col-lg-3 mb-4">
      <div class="card mx-auto text-center">
        <a href="#url"><img class="card-img-top" src="http://placehold.it/350x350" alt="Sample Title"></a>
        <div class="card-body">
          <h2 class="card-title"><span class="fa fa-external-link mr-1"></span><a href="#url">Sample Title</a></h2>
        </div>
      </div>
    </div>

    <div class="col-6 col-md-4 col-lg-3 mb-4">
      <div class="card mx-auto text-center">
        <a href="#url"><img class="card-img-top" src="http://placehold.it/350x350" alt="Sample Title"></a>
        <div class="card-body">
          <h2 class="card-title"><span class="fa fa-external-link mr-1"></span><a href="#url">Sample Title</a></h2>
        </div>
      </div>
    </div>

    <div class="col-6 col-md-4 col-lg-3 mb-4">
      <div class="card mx-auto text-center">
        <a href="#url"><img class="card-img-top" src="http://placehold.it/350x350" alt="Sample Title"></a>
        <div class="card-body">
          <h2 class="card-title"><span class="fa fa-external-link mr-1"></span><a href="#url">Sample Title</a></h2>
        </div>
      </div>
    </div>

    <div class="col-6 col-md-4 col-lg-3 mb-4">
      <div class="card mx-auto text-center">
        <a href="#url"><img class="card-img-top" src="http://placehold.it/350x350" alt="Sample Title"></a>
        <div class="card-body">
          <h2 class="card-title"><span class="fa fa-external-link mr-1"></span><a href="#url">Sample Title</a></h2>
        </div>
      </div>
    </div>

  </div>
</div>

在上面的示例中，我使用了 col-6 col-md-4 col-lg-3 为每行显示的元素数添加了一个响应元素，并且 mb- 4 确保每一列都有一个底部边距，这样每一行的顶部/底部边距类似于 Grid 创建的左/右边距。