【发布时间】：2021-02-20 17:05:44
【问题描述】：
我有一个 Angular 10 项目，我必须连续对齐 3 张卡片，到目前为止它们水平对齐成一排，但我必须给它们一些间距 strong> 到目前为止还没有那么好用。
我尝试使用引导程序的偏移变量并手动为它们提供边距和填充，但仍然没有运气。在手机中，它可以很好地使用间距，而不是在桌面上。这是我的代码，有人可以查看它并指出我的错误吗？
到目前为止我尝试了什么：
- 手动设置边距和填充 -> 无效 全部。
- 使用引导程序的偏移变量 -> 没有变化。
- 使用 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>
【问题讨论】：
标签： html css angular twitter-bootstrap bootstrap-4