时间戳

首页 > 解决方案 > 如何在行内的元素之间给出间距

html - 如何在行内的元素之间给出间距

问题描述

我有一个 Angular 10 项目，我必须将 3 张卡片连续对齐，到目前为止它们水平对齐成一排，但我必须给它们一些间距，这直到现在还没有多大用处。

我尝试使用引导程序的偏移变量并手动为它们提供边距和填充，但仍然没有运气。在手机中，它可以很好地使用间距，而不是在桌面上。这是我的代码，有人可以查看它并指出我的错误吗？

到目前为止我尝试了什么：

  1. 手动设置边距和填充 -> 根本不起作用。
  2. 使用引导程序的偏移变量-> 没有变化。
  3. 使用 flex 参数 -> 也没有变化

卡片组件.html

<section>

  <div class="row ">

    <div class="col-xl-4 col-md-4 my-4 ">

      <mdb-card cascade="true" class="cascading-admin-card">

        <div class="admin-up">
          <mdb-icon fas icon="money-bill-alt" class="primary-color"></mdb-icon>
          <div class="data">
            <p>SALES</p>
            <h4><strong>$2000</strong></h4>
          </div>
        </div>

        <mdb-card-body [cascade]="true">
          <div class="progress">
            <div class="progress-bar bg-primary" role="progressbar" style="width: 25%" aria-valuenow="25"
                 aria-valuemin="0" aria-valuemax="100"></div>
          </div>
          <p class="card-text">Better than last week (25%)</p>
        </mdb-card-body>

      </mdb-card>

    </div>
 
  </div>


</section>

我的这个组件的 scss：

.cascading-admin-card {
  margin-top: 20px;
  float: left;
  width:18rem;

}
.cascading-admin-card .admin-up {
  margin-left: 4%;
  margin-right: 4%;
  margin-top: -20px;
  padding-top: 5px;
}
.cascading-admin-card .admin-up mdb-icon {
  padding: 1.7rem;
  font-size: 2rem;
  color: #fff;
  text-align: left;
  margin-right: 1rem;
  border-radius: 3px;
  box-shadow: 0 2px 9px 0 rgba(0,0,0,.2),0 2px 13px 0 rgba(0,0,0,.19); }
.cascading-admin-card .admin-up .data {
  float: right;
  margin-top: 2rem;
  text-align: right; }
.cascading-admin-card .admin-up .data p {
  color: #999999;
  font-size: 12px; }

.classic-admin-card .card-body {
  color: #fff;
  margin-bottom: 0;
  padding: 0.9rem; }
.classic-admin-card .card-body p {
  font-size: 13px;
  opacity: 0.7;
  margin-bottom: 0; }
.classic-admin-card .card-body h4 {
  margin-top: 10px; }
.classic-admin-card .card-body .float-right .fa {
  font-size: 3rem;
  opacity: 0.5; }

.classic-admin-card .progress {
  margin: 0;
  opacity: 0.7; }


.cascading-admin-card .admin-up .fa {
  -webkit-box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.2), 0 2px 13px 0 rgba(0, 0, 0, 0.19);
  box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.2), 0 2px 13px 0 rgba(0, 0, 0, 0.19);
}

以及我使用此元素的主仪表板：

<div class="main-content justify-content-center" style="padding-top: 50px; align-content: center">
  <div class="container">
    <div class="row row-cols-12 row-cols-md-3">
      <div class="col mb-4">
        <moniesta-client-card-info></moniesta-client-card-info>
      </div>
      <div class="col mb-4">
        <moniesta-client-card-info></moniesta-client-card-info>
      </div>
      <div class="col mb-4">
        <moniesta-client-card-info></moniesta-client-card-info>
      </div>
    </div>


  </div>
</div>

标签： htmlcssangulartwitter-bootstrapbootstrap-4

解决方案

这是我提供代码 flex 时得到的图像：

这是在桌面上这是移动的：移动视图

我想首先在桌面上实现两件事我希望卡片接下来开始，侧边栏有一点空间。并且反应灵敏

我的代码如下所示：

<div class="main-content " style="padding-top: 50px; align-content: center">
  <div class="container">

    <div class="d-inline-flex">
      <section class="col-4">
      <div >
        <moniesta-client-card-info></moniesta-client-card-info>
      </div>
      </section>
      <section class="col-4">
        <div >
        <moniesta-client-card-info></moniesta-client-card-info>
      </div>
      </section>
      <section class="col-4">
        <div >
        <moniesta-client-card-info></moniesta-client-card-info>
      </div>
      </section>
       </div>
  </div>

</div>

推荐阅读