使 Bootstrap Card 在所有方面都相对较小答案

【问题标题】：Making Bootstrap Card relatively small in all perspective使 Bootstrap Card 在所有方面都相对较小
【发布时间】：2020-08-07 23:53:07
【问题描述】：

我的要求

我需要制作一个小尺寸的引导卡，以便它完全适合我的页面。
需要移除卡片周围的大部分内边距、边距空间、文本、图标... 也就是说，它应该尽可能小以连续放置 8 个（大小相等）这样的卡片以便所有参数完全适合单个页面视图以及上面显示的 2 个图表，如下面的屏幕截图所示。

Bootstrap 中的以下代码为我提供了这张图片所示的卡片。我正在尝试制作相同的卡片，一种卡片的复制品，但尺寸较小。

<div class=" col-lg-3 col-md-6">
      <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>
                <h3 class=" card-title">+45k</h3>
              </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>

我的尝试 我尝试更改引导程序的 CSS 元素 col 编号（col-1，col-5..），删除 CSS 元素 card,card-body, ... , info-icon 的填充以使图标相对较小但它并没有让我得到它的复制品 w.r.t 文本、图标。它总是以一张乱七八糟的卡片告终。

请帮助我。 我的最终目标是让它更小，并在卡片中包含额外的数据（4 个参数数据），看起来应该像这样

那是

左上角的图标
1. 右上角的第一个数据
2. 图标下方卡片页脚上方的第二个数据
3. 第三个数据右侧角，与上面提到的第二个数据 #3 右对齐
4. 页脚中的第四个数据。

另外，如果您有任何其他好的想法可以在一张卡片中包含 4 个参数数据，请与我分享。我这样做是为了在单个页面视图中适应所有参数。

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

使用col 类而不是col-lg-3 col-md-6。因此，您可以在一行中设置 8 列。

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

<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>
              <h3 class=" card-title">+45k</h3>
            </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>
              <h3 class=" card-title">+45k</h3>
            </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>
              <h3 class=" card-title">+45k</h3>
            </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>
              <h3 class=" card-title">+45k</h3>
            </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>
              <h3 class=" card-title">+45k</h3>
            </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>
              <h3 class=" card-title">+45k</h3>
            </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>
              <h3 class=" card-title">+45k</h3>
            </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>
              <h3 class=" card-title">+45k</h3>
            </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>

【讨论】：

哇就像一个魅力。谢谢@Nisharg Shah。如果可能的话，你能不能帮我把4个参数放在卡片里；对我来说，如果我在那里添加一些东西，就会发生一些事情:-( - 混乱。
什么，我不明白，什么 4 参数？
如果你喜欢我的回答或者你从我的回答中得到任何帮助，不要忘记考虑投票谢谢！！
我想在卡片内添加 4 个数据值（比如平均值、最小值、最大值、范围的值）
是的，我已经添加了图片。它的第二个图像。下面是my Ultimate Goal 感谢您的帮助。