让Bootstrap卡片在各个角度都相对较小

我的要求

  1. 我需要制作一个尺寸很小的bootstrap卡片,使其完全适合我的页面。
  2. 需要去掉卡片周围的很多padding、margin空格、文字、图标……也就是说,它应该尽可能小,以适合8张(大小相等)这样的卡片排在一起o,所有的参数完全适合在一个单一的页面视图以及上面显示的2个图表,如下面的截图所示。dashboard

下面的代码在Bootstrap中得到了我的卡片,如图所示。我试图做同样的卡,那种复制的卡,但小尺寸。

bootstrap_card

<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>

我已经尝试了我试图改变bootstrap的CSS元素 col (col-1,col-5…),去除CSS元素的padding。card,card-body, ... , info-icon 以使图标相对较小But it doesn’t get me its replica w.r.t the text, icon.It always ended up with a messed up card.

请帮助我。我的最终目标 就是把它做得更小,并在卡片中包含额外的数据(4个参数数据),它应该是这样的。required_bootstrap_card

那就是

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

另外,如果你有其他好的想法,在一张卡片中包含4个参数数据,请与我分享。这是我做的,以适应所有参数在单页视图中。

解决方案:

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

给TA打赏
共{{data.count}}人
人已打赏
未分类

除非是块,否则Ruby返回

2022-9-9 3:18:20

未分类

围棋中无方法结构的多态性

2022-9-9 3:29:16

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索