首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何在一张卡中对齐多个参数

如何在一张卡中对齐多个参数
EN

Stack Overflow用户
提问于 2020-04-26 07:19:14
回答 1查看 56关注 0票数 0

My Requiremnet在一行中对齐8张卡片。每张卡包括4种类型的数据,表示平均值、范围、Min和最大值。

我尝试过的代码是

代码语言:javascript
复制
<div class="row">
  <div class="col">
    <div class=" card card-stats">
      <div class=" card-body">
        <div class=" row">
          <div class=" col-5">
            <div class=" info-icon text-center icon-primary">
              <i class=" icons icon-shape-star"> </i>
            </div>
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h6 class=" card-title">+45k</h6>
            </div>
          </div>
        </div>
        <div class=" row">
          <div class=" col-5">
            <!-- <div class=" numbers"> -->
              <p class=" card-category">Average</p>
              <h6 class=" card-title">+45k</h6>
            <!-- </div> -->
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h6 class=" card-title">+45k</h6>
            </div>
          </div>
        </div>
      </div>
      <div class=" card-footer">
        <hr />

        <div class=" stats">
          <i class=" icons icon-sound-wave"> </i> Last Research
        </div>
      </div>
    </div>
  </div>

  <div class="col">
    <div class=" card card-stats">
      <div class=" card-body">
        <div class=" row">
          <div class=" col-5">
            <div class=" info-icon text-center icon-primary">
              <i class=" icons icon-shape-star"> </i>
            </div>
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h6 class=" card-title">+45k</h6>
            </div>
          </div>
        </div>
        <div class=" row">
          <div class=" col-5">
            <!-- <div class=" numbers"> -->
              <p class=" card-category">Average</p>
              <h6 class=" card-title">+45k</h6>
            <!-- </div> -->
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h6 class=" card-title">+45k</h6>
            </div>
          </div>
        </div>
      </div>
      <div class=" card-footer">
        <hr />

        <div class=" stats">
          <i class=" icons icon-sound-wave"> </i> Last Research
        </div>
      </div>
    </div>
  </div>

  <div class="col">
    <div class=" card card-stats">
      <div class=" card-body">
        <div class=" row">
          <div class=" col-5">
            <div class=" info-icon text-center icon-primary">
              <i class=" icons icon-shape-star"> </i>
            </div>
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h6 class=" card-title">+45k</h6>
            </div>
          </div>
        </div>
        <div class=" row">
          <div class=" col-5">
            <!-- <div class=" numbers"> -->
              <p class=" card-category">Average</p>
              <h6 class=" card-title">+45k</h6>
            <!-- </div> -->
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h6 class=" card-title">+45k</h6>
            </div>
          </div>
        </div>
      </div>
      <div class=" card-footer">
        <hr />

        <div class=" stats">
          <i class=" icons icon-sound-wave"> </i> Last Research
        </div>
      </div>
    </div>
  </div>

  <div class="col">
    <div class=" card card-stats">
      <div class=" card-body">
        <div class=" row">
          <div class=" col-5">
            <div class=" info-icon text-center icon-primary">
              <i class=" icons icon-shape-star"> </i>
            </div>
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h6 class=" card-title">+45k</h6>
            </div>
          </div>
        </div>
        <div class=" row">
          <div class=" col-5">
            <!-- <div class=" numbers"> -->
              <p class=" card-category">Average</p>
              <h6 class=" card-title">+45k</h6>
            <!-- </div> -->
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h6 class=" card-title">+45k</h6>
            </div>
          </div>
        </div>
      </div>
      <div class=" card-footer">
        <hr />

        <div class=" stats">
          <i class=" icons icon-sound-wave"> </i> Last Research
        </div>
      </div>
    </div>
  </div>


  <div class="col">
    <div class=" card card-stats">
      <div class=" card-body">
        <div class=" row">
          <div class=" col-5">
            <div class=" info-icon text-center icon-primary">
              <i class=" icons icon-shape-star"> </i>
            </div>
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h6 class=" card-title">+45k</h6>
            </div>
          </div>
        </div>
        <div class=" row">
          <div class=" col-5">
            <!-- <div class=" numbers"> -->
              <p class=" card-category">Average</p>
              <h6 class=" card-title">+45k</h6>
            <!-- </div> -->
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h6 class=" card-title">+45k</h6>
            </div>
          </div>
        </div>
      </div>
      <div class=" card-footer">
        <hr />

        <div class=" stats">
          <i class=" icons icon-sound-wave"> </i> Last Research
        </div>
      </div>
    </div>
  </div>

  <div class="col">
    <div class=" card card-stats">
      <div class=" card-body">
        <div class=" row">
          <div class=" col-5">
            <div class=" info-icon text-center icon-primary">
              <i class=" icons icon-shape-star"> </i>
            </div>
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h6 class=" card-title">+45k</h6>
            </div>
          </div>
        </div>
        <div class=" row">
          <div class=" col-5">
            <!-- <div class=" numbers"> -->
              <p class=" card-category">Average</p>
              <h6 class=" card-title">+45k</h6>
            <!-- </div> -->
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h6 class=" card-title">+45k</h6>
            </div>
          </div>
        </div>
      </div>
      <div class=" card-footer">
        <hr />

        <div class=" stats">
          <i class=" icons icon-sound-wave"> </i> Last Research
        </div>
      </div>
    </div>
  </div>

  <div class="col">
    <div class=" card card-stats">
      <div class=" card-body">
        <div class=" row">
          <div class=" col-5">
            <div class=" info-icon text-center icon-primary">
              <i class=" icons icon-shape-star"> </i>
            </div>
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h6 class=" card-title">+45k</h6>
            </div>
          </div>
        </div>
        <div class=" row">
          <div class=" col-5">
            <!-- <div class=" numbers"> -->
              <p class=" card-category">Average</p>
              <h6 class=" card-title">+45k</h6>
            <!-- </div> -->
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h6 class=" card-title">+45k</h6>
            </div>
          </div>
        </div>
      </div>
      <div class=" card-footer">
        <hr />

        <div class=" stats">
          <i class=" icons icon-sound-wave"> </i> Last Research
        </div>
      </div>
    </div>
  </div>

  <div class="col">
    <div class=" card card-stats">
      <div class=" card-body">
        <div class=" row">
          <div class=" col-5">
            <div class=" info-icon text-center icon-primary">
              <i class=" icons icon-shape-star"> </i>
            </div>
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h6 class=" card-title">+45k</h6>
            </div>
          </div>
        </div>
        <div class=" row">
          <div class=" col-5">
            <!-- <div class=" numbers"> -->
              <p class=" card-category">Average</p>
              <h6 class=" card-title">+45k</h6>
            <!-- </div> -->
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h6 class=" card-title">+45k</h6>
            </div>
          </div>
        </div>
      </div>
      <div class=" card-footer">
        <hr />

        <div class=" stats">
          <i class=" icons icon-sound-wave"> </i> Last Research
        </div>
      </div>
    </div>
  </div>

</div>

但它提供了一些扭曲的显示,如下图所示。我无法删除每个卡中\\之间的额外填充\空间。如果我移除一些物品-图标,文字.-从卡里出来

请帮我把卡片正确地排在同一行。

这张卡的预期输出如下图所示

使用Nisharg Shah的答案的更新代码

代码语言:javascript
复制
<div class="row">
  <div class="col px-1">
    <div class=" card card-stats">
      <div class=" card-body">
        <div class=" row">
          <div class=" col-5">
            <div class=" info-icon text-center icon-primary">
              <i class=" fas fa-clock"> </i>
            </div>
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Average</p>
              <h6 class=" card-title">43.11</h6>
            </div>
          </div>
        </div>
        <div class=" row">
          <div class=" col-6">
            <!-- <div class=" numbers"> -->
            <p style="font-size: 10px;" class=" card-category">Range</p>
            <h6 class=" card-title">26.87</h6>
            <!-- </div> -->
          </div>
          <div class=" col-6">
            <div class=" numbers">
              <p style="font-size: 10px;" class=" card-category">Min</p>
              <h6 class=" card-title">98.44</h6>
            </div>
          </div>
        </div>
      </div>
      <div class=" card-footer">
        <hr />

        <div class=" stats">
          <i class=" fa fa-car"> </i> Max
          <span class="numbers">87.22</span>
        </div>
      </div>
    </div>
  </div>

  <div class="col px-1">
    <div class=" card card-stats">
      <div class=" card-body">
        <div class=" row">
          <div class=" col-5">
            <div class=" info-icon text-center icon-primary">
              <i class=" fas fa-clock"> </i>
            </div>
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Average</p>
              <h6 class=" card-title">43.11</h6>
            </div>
          </div>
        </div>
        <div class=" row">
          <div class=" col-6">
            <!-- <div class=" numbers"> -->
            <p style="font-size: 10px;" class=" card-category">Range</p>
            <h6 class=" card-title">26.87</h6>
            <!-- </div> -->
          </div>
          <div class=" col-6">
            <div class=" numbers">
              <p style="font-size: 10px;" class=" card-category">Min</p>
              <h6 class=" card-title">98.44</h6>
            </div>
          </div>
        </div>
      </div>
      <div class=" card-footer">
        <hr />

        <div class=" stats">
          <i class=" fa fa-car"> </i> Max
          <span class="numbers">87.22</span>
        </div>
      </div>
    </div>
  </div>

  <div class="col px-1">
    <div class=" card card-stats">
      <div class=" card-body">
        <div class=" row">
          <div class=" col-5">
            <div class=" info-icon text-center icon-primary">
              <i class=" fas fa-clock"> </i>
            </div>
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Average</p>
              <h6 class=" card-title">43.11</h6>
            </div>
          </div>
        </div>
        <div class=" row">
          <div class=" col-6">
            <!-- <div class=" numbers"> -->
            <p style="font-size: 10px;" class=" card-category">Range</p>
            <h6 class=" card-title">26.87</h6>
            <!-- </div> -->
          </div>
          <div class=" col-6">
            <div class=" numbers">
              <p style="font-size: 10px;" class=" card-category">Min</p>
              <h6 class=" card-title">98.44</h6>
            </div>
          </div>
        </div>
      </div>
      <div class=" card-footer">
        <hr />

        <div class=" stats">
          <i class=" fa fa-car"> </i> Max
          <span class="numbers">87.22</span>
        </div>
      </div>
    </div>
  </div>

  <div class="col px-1">
    <div class=" card card-stats">
      <div class=" card-body">
        <div class=" row">
          <div class=" col-5">
            <div class=" info-icon text-center icon-primary">
              <i class=" fas fa-clock"> </i>
            </div>
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Average</p>
              <h6 class=" card-title">43.11</h6>
            </div>
          </div>
        </div>
        <div class=" row">
          <div class=" col-6">
            <!-- <div class=" numbers"> -->
            <p style="font-size: 10px;" class=" card-category">Range</p>
            <h6 class=" card-title">26.87</h6>
            <!-- </div> -->
          </div>
          <div class=" col-6">
            <div class=" numbers">
              <p style="font-size: 10px;" class=" card-category">Min</p>
              <h6 class=" card-title">98.44</h6>
            </div>
          </div>
        </div>
      </div>
      <div class=" card-footer">
        <hr />

        <div class=" stats">
          <i class=" fa fa-car"> </i> Max
          <span class="numbers">87.22</span>
        </div>
      </div>
    </div>
  </div>

  <div class="col px-1">
    <div class=" card card-stats">
      <div class=" card-body">
        <div class=" row">
          <div class=" col-5">
            <div class=" info-icon text-center icon-primary">
              <i class=" fas fa-clock"> </i>
            </div>
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Average</p>
              <h6 class=" card-title">43.11</h6>
            </div>
          </div>
        </div>
        <div class=" row">
          <div class=" col-6">
            <!-- <div class=" numbers"> -->
            <p style="font-size: 10px;" class=" card-category">Range</p>
            <h6 class=" card-title">26.87</h6>
            <!-- </div> -->
          </div>
          <div class=" col-6">
            <div class=" numbers">
              <p style="font-size: 10px;" class=" card-category">Min</p>
              <h6 class=" card-title">98.44</h6>
            </div>
          </div>
        </div>
      </div>
      <div class=" card-footer">
        <hr />

        <div class=" stats">
          <i class=" fa fa-car"> </i> Max
          <span class="numbers">87.22</span>
        </div>
      </div>
    </div>
  </div>

  <div class="col px-1">
    <div class=" card card-stats">
      <div class=" card-body">
        <div class=" row">
          <div class=" col-5">
            <div class=" info-icon text-center icon-primary">
              <i class=" fas fa-clock"> </i>
            </div>
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Average</p>
              <h6 class=" card-title">43.11</h6>
            </div>
          </div>
        </div>
        <div class=" row">
          <div class=" col-6">
            <!-- <div class=" numbers"> -->
            <p style="font-size: 10px;" class=" card-category">Range</p>
            <h6 class=" card-title">26.87</h6>
            <!-- </div> -->
          </div>
          <div class=" col-6">
            <div class=" numbers">
              <p style="font-size: 10px;" class=" card-category">Min</p>
              <h6 class=" card-title">98.44</h6>
            </div>
          </div>
        </div>
      </div>
      <div class=" card-footer">
        <hr />

        <div class=" stats">
          <i class=" fa fa-car"> </i> Max
          <span class="numbers">87.22</span>
        </div>
      </div>
    </div>
  </div>

  <div class="col px-1">
    <div class=" card card-stats">
      <div class=" card-body">
        <div class=" row">
          <div class=" col-5">
            <div class=" info-icon text-center icon-primary">
              <i class=" fas fa-clock"> </i>
            </div>
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Average</p>
              <h6 class=" card-title">43.11</h6>
            </div>
          </div>
        </div>
        <div class=" row">
          <div class=" col-6">
            <!-- <div class=" numbers"> -->
            <p style="font-size: 10px;" class=" card-category">Range</p>
            <h6 class=" card-title">26.87</h6>
            <!-- </div> -->
          </div>
          <div class=" col-6">
            <div class=" numbers">
              <p style="font-size: 10px;" class=" card-category">Min</p>
              <h6 class=" card-title">98.44</h6>
            </div>
          </div>
        </div>
      </div>
      <div class=" card-footer">
        <hr />

        <div class=" stats">
          <i class=" fa fa-car"> </i> Max
          <span class="numbers">87.22</span>
        </div>
      </div>
    </div>
  </div>

  <div class="col px-1">
    <div class=" card card-stats">
      <div class=" card-body">
        <div class=" row">
          <div class=" col-5">
            <div class=" info-icon text-center icon-primary">
              <i class=" fas fa-clock"> </i>
            </div>
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Average</p>
              <h6 class=" card-title">43.11</h6>
            </div>
          </div>
        </div>
        <div class=" row">
          <div class=" col-6">
            <!-- <div class=" numbers"> -->
            <p style="font-size: 10px;" class=" card-category">Range</p>
            <h6 class=" card-title">26.87</h6>
            <!-- </div> -->
          </div>
          <div class=" col-6">
            <div class=" numbers">
              <p style="font-size: 10px;" class=" card-category">Min</p>
              <h6 class=" card-title">98.44</h6>
            </div>
          </div>
        </div>
      </div>
      <div class=" card-footer">
        <hr />

        <div class=" stats">
          <i class=" fa fa-car"> </i> Max
          <span class="numbers">87.22</span>
        </div>
      </div>
    </div>
  </div>

</div>

如下图所示

我想让顶部的图标更小,并移除上面在图像中绿色箭头标记的页脚之间的额外空间。请帮帮忙

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-04-26 07:44:17

您可以在所有的px-1类中添加col类,这样就减少了卡片之间的差距。

px-1 = .5rem = 8px,如果您想缩小差距,可以在所有col类上添加自定义CSS。

代码语言:javascript
复制
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="row">
  <div class="col px-1">
    <div class=" card card-stats">
      <div class=" card-body">
        <div class=" row">
          <div class=" col-5">
            <div class=" info-icon text-center icon-primary">
              <i class=" icons icon-shape-star"> </i>
            </div>
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h6 class=" card-title">+45k</h6>
            </div>
          </div>
        </div>
        <div class=" row">
          <div class=" col-5">
            <!-- <div class=" numbers"> -->
              <p class=" card-category">Average</p>
              <h6 class=" card-title">+45k</h6>
            <!-- </div> -->
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h6 class=" card-title">+45k</h6>
            </div>
          </div>
        </div>
      </div>
      <div class=" card-footer">
        <hr />

        <div class=" stats">
          <i class=" icons icon-sound-wave"> </i> Last Research
        </div>
      </div>
    </div>
  </div>

  <div class="col px-1">
    <div class=" card card-stats">
      <div class=" card-body">
        <div class=" row">
          <div class=" col-5">
            <div class=" info-icon text-center icon-primary">
              <i class=" icons icon-shape-star"> </i>
            </div>
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h6 class=" card-title">+45k</h6>
            </div>
          </div>
        </div>
        <div class=" row">
          <div class=" col-5">
            <!-- <div class=" numbers"> -->
              <p class=" card-category">Average</p>
              <h6 class=" card-title">+45k</h6>
            <!-- </div> -->
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h6 class=" card-title">+45k</h6>
            </div>
          </div>
        </div>
      </div>
      <div class=" card-footer">
        <hr />

        <div class=" stats">
          <i class=" icons icon-sound-wave"> </i> Last Research
        </div>
      </div>
    </div>
  </div>

  <div class="col px-1">
    <div class=" card card-stats">
      <div class=" card-body">
        <div class=" row">
          <div class=" col-5">
            <div class=" info-icon text-center icon-primary">
              <i class=" icons icon-shape-star"> </i>
            </div>
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h6 class=" card-title">+45k</h6>
            </div>
          </div>
        </div>
        <div class=" row">
          <div class=" col-5">
            <!-- <div class=" numbers"> -->
              <p class=" card-category">Average</p>
              <h6 class=" card-title">+45k</h6>
            <!-- </div> -->
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h6 class=" card-title">+45k</h6>
            </div>
          </div>
        </div>
      </div>
      <div class=" card-footer">
        <hr />

        <div class=" stats">
          <i class=" icons icon-sound-wave"> </i> Last Research
        </div>
      </div>
    </div>
  </div>

  <div class="col px-1">
    <div class=" card card-stats">
      <div class=" card-body">
        <div class=" row">
          <div class=" col-5">
            <div class=" info-icon text-center icon-primary">
              <i class=" icons icon-shape-star"> </i>
            </div>
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h6 class=" card-title">+45k</h6>
            </div>
          </div>
        </div>
        <div class=" row">
          <div class=" col-5">
            <!-- <div class=" numbers"> -->
              <p class=" card-category">Average</p>
              <h6 class=" card-title">+45k</h6>
            <!-- </div> -->
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h6 class=" card-title">+45k</h6>
            </div>
          </div>
        </div>
      </div>
      <div class=" card-footer">
        <hr />

        <div class=" stats">
          <i class=" icons icon-sound-wave"> </i> Last Research
        </div>
      </div>
    </div>
  </div>


  <div class="col px-1">
    <div class=" card card-stats">
      <div class=" card-body">
        <div class=" row">
          <div class=" col-5">
            <div class=" info-icon text-center icon-primary">
              <i class=" icons icon-shape-star"> </i>
            </div>
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h6 class=" card-title">+45k</h6>
            </div>
          </div>
        </div>
        <div class=" row">
          <div class=" col-5">
            <!-- <div class=" numbers"> -->
              <p class=" card-category">Average</p>
              <h6 class=" card-title">+45k</h6>
            <!-- </div> -->
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h6 class=" card-title">+45k</h6>
            </div>
          </div>
        </div>
      </div>
      <div class=" card-footer">
        <hr />

        <div class=" stats">
          <i class=" icons icon-sound-wave"> </i> Last Research
        </div>
      </div>
    </div>
  </div>

  <div class="col px-1">
    <div class=" card card-stats">
      <div class=" card-body">
        <div class=" row">
          <div class=" col-5">
            <div class=" info-icon text-center icon-primary">
              <i class=" icons icon-shape-star"> </i>
            </div>
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h6 class=" card-title">+45k</h6>
            </div>
          </div>
        </div>
        <div class=" row">
          <div class=" col-5">
            <!-- <div class=" numbers"> -->
              <p class=" card-category">Average</p>
              <h6 class=" card-title">+45k</h6>
            <!-- </div> -->
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h6 class=" card-title">+45k</h6>
            </div>
          </div>
        </div>
      </div>
      <div class=" card-footer">
        <hr />

        <div class=" stats">
          <i class=" icons icon-sound-wave"> </i> Last Research
        </div>
      </div>
    </div>
  </div>

  <div class="col px-1">
    <div class=" card card-stats">
      <div class=" card-body">
        <div class=" row">
          <div class=" col-5">
            <div class=" info-icon text-center icon-primary">
              <i class=" icons icon-shape-star"> </i>
            </div>
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h6 class=" card-title">+45k</h6>
            </div>
          </div>
        </div>
        <div class=" row">
          <div class=" col-5">
            <!-- <div class=" numbers"> -->
              <p class=" card-category">Average</p>
              <h6 class=" card-title">+45k</h6>
            <!-- </div> -->
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h6 class=" card-title">+45k</h6>
            </div>
          </div>
        </div>
      </div>
      <div class=" card-footer">
        <hr />

        <div class=" stats">
          <i class=" icons icon-sound-wave"> </i> Last Research
        </div>
      </div>
    </div>
  </div>

  <div class="col px-1">
    <div class=" card card-stats">
      <div class=" card-body">
        <div class=" row">
          <div class=" col-5">
            <div class=" info-icon text-center icon-primary">
              <i class=" icons icon-shape-star"> </i>
            </div>
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h6 class=" card-title">+45k</h6>
            </div>
          </div>
        </div>
        <div class=" row">
          <div class=" col-5">
            <!-- <div class=" numbers"> -->
              <p class=" card-category">Average</p>
              <h6 class=" card-title">+45k</h6>
            <!-- </div> -->
          </div>
          <div class=" col-7">
            <div class=" numbers">
              <p class=" card-category">Followers</p>
              <h6 class=" card-title">+45k</h6>
            </div>
          </div>
        </div>
      </div>
      <div class=" card-footer">
        <hr />

        <div class=" stats">
          <i class=" icons icon-sound-wave"> </i> Last Research
        </div>
      </div>
    </div>
  </div>
</div>


<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/61437135

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档