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

Posted 2023-03-05

【中文标题】自定义卡片引导程序 4 内的 div

【英文标题】：customization card bootstrap 4 inside div

【发布时间】：2020-12-23 18:47:10

【问题描述】：

我使用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>

但我做不到，你知道吗？

【问题讨论】：

我在您提供的图片中没有看到其他 5 张卡片...？如果我错了，请纠正我，但那里只有 3 个。

你好@IslamElshobokshy，是的，在图片中，只有 3 个，但必须是 5，在代码中我也放了 3，但这是必要的 5

【参考方案1】：

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

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

【讨论】：

你好@Mudassir Ahmed，我可以在 1 行放 3 张卡片，有例子吗？

您可以将 3 放在 1 行中，因为它们适合父级 <div class="card w-100 mb-2"> 。这里你指定 w-100 ，最小的 w 调整实用程序是 w-25 ，它只能适合 4，不能适合 5，而且它是相对于父级的。

你好@Mudassir Ahmed，你能给我举个例子吗，因为在我的例子中，我没有很好的对齐方式

您正在使用与父类相关的尺寸调整实用程序，因此在您的个人卡片中，您正在分配宽度w-25，这与您已分配宽度的父卡相关作为w-100。所以父卡片宽度的 100%，每张卡片宽度的 25%，你最多只能适应 4 个，而不是 5 个。如果你想适应 5 个，在你的 CSS 文件中添加你自己的宽度，然后不要'不要使用尺寸实用程序。