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

问题描述

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

但是我做不到，知道吗？

解决方法

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

的引导文档

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

alignment html twitter-bootstrap