My Requiremnet在一行中对齐8张卡片。每张卡包括4种类型的数据,表示平均值、范围、Min和最大值。
我尝试过的代码是
<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的答案的更新代码
<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>如下图所示

我想让顶部的图标更小,并移除上面在图像中绿色箭头标记的页脚之间的额外空间。请帮帮忙
发布于 2020-04-26 07:44:17
您可以在所有的px-1类中添加col类,这样就减少了卡片之间的差距。
px-1 = .5rem = 8px,如果您想缩小差距,可以在所有col类上添加自定义CSS。
<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>
https://stackoverflow.com/questions/61437135
复制相似问题