添加响应式卡片视图引导程序

Posted 2023-03-05

【中文标题】添加响应式卡片视图引导程序

【英文标题】：Add responsive card view bootstrap

【发布时间】：2022-01-20 06:52:48

【问题描述】：

如何使用 bootstrap html,css 添加卡片视图。

我正在尝试与上图完全一样，但无法做到。这是我的代码：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="cardview">
    <div class="card">
        <div>
            <div class="numbers">94%</div>
            <div class="percentage">6% since last year</div>
        </div>                
    </div>       
    <div class="card">
        <div>
            <div class="numbers">193</div>
            <div class="percentage">6% since last year</div>
        </div> 
    </div>
    <div class="card">
        <div>
            <div class="numbers">13%</div>
            <div class="percentage">6% since last year</div>
        </div>                
    </div> 
    <div class="card">
        <div>
            <div class="numbers">24.5</div>
            <div class="percentage">6% since last year</div>
        </div>                
    </div>
    <div class="card">
        <div>
            <div class="numbers">13%</div>
            <div class="percentage">6% since last year</div>
        </div>                
    </div> 
    <div class="card">
        <div>
            <div class="numbers">24.5</div>
            <div class="percentage">6% since last year</div>
        </div>                
    </div> 
</div>

我们将不胜感激。

【参考方案1】：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-6">
      <div class="row">
        <div class="col-6 p-2">
          <div class="card">
              <div>
                  <div class="numbers">94%</div>
                  <div class="percentage">6% since last year</div>
              </div>                
          </div>  
        </div>
        <div class="col-6 p-2">
          <div class="card">
              <div>
                  <div class="numbers">193</div>
                  <div class="percentage">6% since last year</div>
              </div> 
          </div>
        </div>
        <div class="col-6 p-2">
          <div class="card">
              <div>
                  <div class="numbers">13%</div>
                  <div class="percentage">6% since last year</div>
              </div>                
          </div> 
        </div>
        <div class="col-6 p-2">
          <div class="card">
              <div>
                  <div class="numbers">24.5</div>
                  <div class="percentage">6% since last year</div>
              </div>                
          </div>
        </div>
      </div>
    </div>
    <div class="col-6 p-2">
      <div class="card h-100">
          <div>
              <div class="numbers">13%</div>
              <div class="percentage">6% since last year</div>
          </div>
      </div>
    </div>
    <div class="col-3 p-2">
    <div class="card">
        <div>
            <div class="numbers">24.5</div>
            <div class="percentage">6% since last year</div>
        </div>                
    </div> 
    </div>
    <div class="col-3 p-2">
    <div class="card">
        <div>
            <div class="numbers">24.5</div>
            <div class="percentage">6% since last year</div>
        </div>                
    </div> 
    </div>
    <div class="col-3 p-2">
    <div class="card">
        <div>
            <div class="numbers">24.5</div>
            <div class="percentage">6% since last year</div>
        </div>                
    </div> 
    </div>
    <div class="col-3 p-2">
    <div class="card">
        <div>
            <div class="numbers">24.5</div>
            <div class="percentage">6% since last year</div>
        </div>                
    </div> 
    </div>
  </div>
</div>

【参考方案2】：

我建议使用这个Bootstrap card view generator 来创建你的卡片！

【讨论】：

我有多个卡片视图。那么如何在所有卡片之间添加空格呢？

也许this 会帮助你更多！，我认为这就是你想要实现的目标