时间戳

首页 > 解决方案 > 自定义卡片引导程序 4 内的 div

html - 自定义卡片引导程序 4 内的 div

问题描述

我使用bootstrap4并且我想在里面放一张大卡片，我想在每一行中放 5 张像这个屏幕一样的其他卡片。这是我的代码

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <div class="card w-100 mb-2">
      <div class="card-body">
        <h5 class="card-title">Available products</h5>
        <div class="row" style="display: flex; flex-direction: row;">
            <div class="card mr-2 w-25 mb-2">
              <div class="card-header">34 products</div>
              <div class="mycard-footer">List of products</div>
            </div>
            <div class="card mr-2 w-25 mb-2">
              <div class="card-header">34 products</div>
              <div class="mycard-footer">List of products</div>
            </div>
            <div class="card mr-2 w-25 mb-2">
              <div class="card-header">34 products</div>
              <div class="mycard-footer">List of products</div>
            </div>
        </div>
        
        <a href="#" class="btn btn-primary">Button</a>
      </div>
    </div>

在此处输入图像描述

但我做不到，知道吗？

标签： htmlcsstwitter-bootstrapalignment

解决方案

内部卡片的宽度实用程序是相对于父级的。这是用于调整实用程序大小的引导文档https://getbootstrap.com/docs/4.0/utilities/sizing/

不可能在 1 行中放置 5 张卡片。除非您在 CSS 中添加您的个人样式并且不使用大小调整实用程序。

推荐阅读