Question

我想要列出按线排列的Bootstrap卡列表/图库，当线路已满时转到下一行。浮动左边可以实现的东西左右边缘均匀分布。事先不知道会有多少张牌。

以下是现在的内容

"hamburger".substring(0, 4) returns "hamb"

卡片（生成循环）

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

CSS

<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>

目前，它们都以一条线结束，当线条填充时，它们的宽度（不是高度）会减少。为简单起见，我正在寻找一种所有卡都编码相同的设计。我想，也许我错过了一些Bootstrap 4。

Answer 1

现在这是一个接近的解决方案。特别是“定心”非常实现，或者取决于案例。我想完善它我需要编写一个更智能的循环，可以调整每个卡/行/列等。

<ul>
    <!-- Cards come here -->
</ul>

<强>卡

<div class="card mb-4 mx-3 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

ul {
    margin-left:auto;
    margin-right:auto;
    width:90%;
}

li.card {
 display:inline-block;
 float:left;
 height:20rem;
 width:320px;
} 

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

Answer 2

根据我们的对话，你对Bootstrap很新。您提到需要对列/项的数量进行假设才能使用Bootstrap网格，但这不一定是真的。

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

＆＃13;

<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>

＆＃13;

在上面的示例中，我使用col-6 col-md-4 col-lg-3为每行显示的项目添加了一个响应元素，mb-4确保每列都有一个底部边距，以便每行都有顶部/底部边距类似于网格创建的左/右边缘。

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

2 个答案: