logo标签列表

如何在Bootstrap 4中包装（浮动）卡片

htmltwitter-bootstraptwitter4j
16

我正在使用Bootstrap 4 beta。

我有一个卡片列表。我希望它们的宽度固定，但高度根据内容而变化。

卡片数量可以从1到n个。

我想要的效果是，将卡片从左到右布局，直到屏幕空间用尽，然后换行。

我已经尝试了Bootstrap 4示例页面上列出的所有不同选项，但它们似乎无法换行。

我该如何实现这一点？

以下示例显示它们是3列排列，并且它们之间有很多空间。

 <div class="card-columns">

        <div class="card" style="width: 18rem;">
            <img class="card-img-top" data-src="..." alt="Card image cap">
            <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
        <div class="card"style="width: 18rem;">
            <img class="card-img-top" data-src="..." alt="Card image cap">
            <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
        <div class="card" style="width: 18rem;">
            <img class="card-img-top" data-src="..." alt="Card image cap">
            <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
        <div class="card" style="width: 18rem;">
            <img class="card-img-top" data-src="..." alt="Card image cap">
            <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
        <div class="card" style="width: 18rem;">
            <img class="card-img-top" data-src="..." alt="Card image cap">
            <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
        <div class="card" style="width: 18rem;">
            <img class="card-img-top" data-src="..." alt="Card image cap">
            <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
    </div>
请分享你的代码？ - Mukesh Ram
5个回答
17

在使用这个功能一段时间后，我发现我的浮动方案并不理想，因为在某些情况下，有些卡片下面会有大量空白。经过查看 Bootstrap 4 卡片组件的内容，我发现了一个正好符合我要求的特性："card-columns"。

它将您的卡片排成三列，并在屏幕尺寸较小的情况下重新排列成一列。

Bootstrap Docs 上的 card-columns

谢谢，伙计。你为我节省了很多时间。 - MartinJH
1
我发现card-columns的唯一问题是顺序。如果你有3列15个卡片，页面顶部的卡片将会像"卡1"、"卡6"和"卡11"这样。并不理想！ - Adam Youngers
1
Bootstrap 4.1 链接：https://getbootstrap.com/docs/4.1/components/card/#card-columns - Jason Tarr
感谢分享，Greg！我本来要头疼了。 - manuel_b
这在Bootstrap 5中行不通，对吧？ - O0123
1
我想到了一个可行的浮动卡片类：

floating-card

<style>
    .floating-card {
        float: left;
        margin: 5px;
        max-width: 300px;

    }
</style>

使用示例：

    <div class="floating-card sortable">
    <section class="box-typical task-card task">
        <div class="task-card-photo">
            <img src="img/img-task.jpg" alt="">
        </div>
        <div class="task-card-in">
            <div class="btn-group task-card-menu">
                <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <i class="font-icon-dots-vert-square"></i>
                </button>
                <div class="dropdown-menu dropdown-menu-right">
                    <a class="dropdown-item" href="#"><i class="font-icon font-icon-pencil"></i>Edit</a>
                    <a class="dropdown-item" href="#"><i class="font-icon font-icon-archive"></i>Archive</a>
                    <a class="dropdown-item" href="#"><i class="font-icon font-icon-trash"></i>Delete</a>
                </div>
            </div>
            <div class="task-card-title">
                <a href="#">Create new webpage for sales and marketing stuff</a>
                <span class="task-card-title-label">(BIG)</span>
            </div>
            <div class="progress-compact-style">
                <progress class="progress" value="25" max="100">
                    <div class="progress">
                        <span class="progress-bar" style="width: 25%;">25%</span>
                    </div>
                </progress>
                <div class="progress-compact-style-label">37% done</div>
            </div>
            <div class="task-card-tags">
                <a href="#" class="label label-light-grey">Default</a>
                <a href="#" class="label label-light-grey">Primary</a>
                <a href="#" class="label label-light-grey">Success</a>
            </div>
        </div>
        <div class="task-card-footer">
            <div class="task-card-meta-item"><i class="font-icon font-icon-comments-2"></i>10</div>
            <div class="task-card-meta-item"><i class="font-icon font-icon-clip"></i>24</div>
            <div class="avatar-preview avatar-preview-32">
                <a href="#">
                    <img src="img/photo-64-2.jpg" alt="">
                </a>
            </div>
        </div>
    </section><!--.task-card-->
</div>
0

Bootstrap 5.1已经摆脱了版本4中使用的CSS技术。在这里，他们提供了一个示例，展示如何使用Masonry插件，看下面的代码片段：

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>

</head>

<body>
  <main class="container py-5">
    <h1>Bootstrap and Masonry</h1>
    <div class="row" data-masonry='{"percentPosition": true }'>
      <div class="col-sm-6 col-lg-4 mb-4">
        <div class="card">
          <svg class="bd-placeholder-img card-img-top" width="100%" height="200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>

          <div class="card-body">
            <h5 class="card-title">Card title that wraps to a new line</h5>
            <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-lg-4 mb-4">
        <div class="card p-3">
          <figure class="p-3 mb-0">
            <blockquote class="blockquote">
              <p>A well-known quote, contained in a blockquote element.</p>
            </blockquote>
            <figcaption class="blockquote-footer mb-0 text-muted">
              Someone famous in <cite title="Source Title">Source Title</cite>
            </figcaption>
          </figure>
        </div>
      </div>
      <div class="col-sm-6 col-lg-4 mb-4">
        <div class="card">
          <svg class="bd-placeholder-img card-img-top" width="100%" height="200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>

          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-lg-4 mb-4">
        <div class="card bg-primary text-white text-center p-3">
          <figure class="mb-0">
            <blockquote class="blockquote">
              <p>A well-known quote, contained in a blockquote element.</p>
            </blockquote>
            <figcaption class="blockquote-footer mb-0 text-white">
              Someone famous in <cite title="Source Title">Source Title</cite>
            </figcaption>
          </figure>
        </div>
      </div>
      <div class="col-sm-6 col-lg-4 mb-4">
        <div class="card text-center">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This card has a regular title and short paragraph of text below it.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-lg-4 mb-4">
        <div class="card">
          <svg class="bd-placeholder-img card-img" width="100%" height="260" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Card image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Card image</text></svg>

        </div>
      </div>
      <div class="col-sm-6 col-lg-4 mb-4">
        <div class="card p-3 text-end">
          <figure class="mb-0">
            <blockquote class="blockquote">
              <p>A well-known quote, contained in a blockquote element.</p>
            </blockquote>
            <figcaption class="blockquote-footer mb-0 text-muted">
              Someone famous in <cite title="Source Title">Source Title</cite>
            </figcaption>
          </figure>
        </div>
      </div>
      <div class="col-sm-6 col-lg-4 mb-4">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
          </div>
        </div>
      </div>
    </div>

  </main>
</body>

</html>

有趣。这是我第一次听说砖石，但像你所说的那样，Bootstrap文档显示它与Bootstrap一起使用。 - Greg Gum
0

这里是解决方案... 使用Bootstrap的行和列来实现此目标，请按照以下代码操作。

<div class="row">
 <div class="col-lg-4 col-md-3 col-sm-6">
   <div class="card">
      <img class="card-img-top" data-src="..." alt="Card image cap">
      <div class="card-block">
         <h4 class="card-title">Card title</h4>
         <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
          <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
 </div>
</div>
我尝试过这个，它会把它们放在一个水平列中。 - Greg Gum
从“card” div中删除宽度，并在行和列的标记中进行标记。 - Srikanth Reddy
0

这里有一些代码可以让你玩耍，基于Srikanth的建议。你可以根据浏览器的宽度调整class="col-lg-3 col-md-4 col-sm-6来显示更多或更少的卡片。我还包括了一个宽度显示来显示像素宽度。

当然，你可以调整php循环数量来测试更多或更少的卡片数量。

<body>        
    <center>Width: <span id="width"></span></center>
    <br>
    <div class="container">            
        <div class="row">
<?php    
    for ($x = 0; $x <= 10; $x++) {
        $card = <<<EOF
            <div class="col-lg-3 col-md-4 col-sm-6" style="margin-bottom:10px;">
                <div class="card">
                     <img class="card-img-top" src="your_image.jpg" alt="Card image cap">
                     <div class="card-block" style="margin:5px;">
                         <h4 class="card-title">Card title {$x}</h4>
                         <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                         <center class="link">Join</center>
                     </div>      
                 </div>
            </div>
EOF;
      echo $card;
    }    
?>     
        </div>   
    </div>
<script>
$(window).resize(function() {
    var viewportWidth = $(window).width();
    $('#width').html(viewportWidth);    
});
</script>
</body>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接