Angular 应用程序视图中的 bootstrap 4 元素定位

我正在开发一个 Angular 7 博客应用程序，在那里我在调整使用 bootstrap 4 制作的模板的视图时遇到了一些困难。在主要的 HTML 组件中，我连续创建了两张卡片，其中一张是博客文章和另一张卡片包含类别。类别卡从不同的组件中获取并使用它的选择器调用，即<app-blog-category></app-blog-category>在主 HTML 组件中。以下是我在视图中面临的问题。请查看下图以供参考。您也可以从此链接查看它---> https://stackblitz.com/edit/angular-tlbxbr?file=src%2Fapp%2Fapp.component.html

1) 类别卡在最后一个博客文档旁边呈现，因此在顶部留下了大量空间。如果我margin-top:negetive-value在卡片类上应用样式作为样式，它会得到解决，但是随着设备宽度的增加或减少，该值会有所不同，并且它会高于或低于所需的值。

2）横向卡片内的图像没有占据卡片的全部高度和宽度

3) 当设备宽度在 768px-991px 之间时，类别卡片元素（即标题和列表项）可能由于它们周围的填充过多或居中而损坏。

HTML：

<div class="container">
    <div class="row col col-md-12 mx-auto" style="text-align:center; font-size:22px">All Blogs
      <br><br><br><br>
    </div>
    <div class="row" *ngIf="allBlogs.length>0">
      <div class="col-md-9 card" *ngFor="let blog of allBlogs">
        <div class="row">
          <div class="col-md-4">
            <a [routerLink]="['/blog', blog.blogId]"><img src="http://localhost:4000/{{blog.imagePath}}" class="card-img-top card-img-size" alt="blog1"></a>
           </div>
      <div class="col-md-8 px-3">
        <div class="card-block px-3">
          <h4 class="card-title">{{blog.title}}</h4>
          <p class="card-text">{{blog.description}}</p>
          <br>
          <a [routerLink]="['/blog', blog.blogId]" class="mt-auto btn btn-primary">Read More</a>
        </div>
      </div>
    </div>
      </div>
      <div class="col-md-3 col-sm-12">
        <div class="container">     //note that this part is called from a separate angular component by it's selector <app-blog-category></app-blog-category>
    <div class="row">
            <div class="col-md-12 card">
                <article class="filter-group">
                        <div class="card-body">
                            <header class="card-header">
                                <h6 class="title">Categories</h6>
                            </header>
                            <ul class="list-menu">
                                <li *ngFor="let category of categories" [routerLink]="['/bycategory/', category.categoryId]">{{category.categoryName}}</li>
                            </ul>
                        </div>
                </article>
             </div>
           </div>
        </div>
      </div>
    </div>
  </div>

CSS：

.card-block {
    font-size: 1em;
    position: relative;
    margin: 0;
    padding: 1em;
    border: none;
    border-top: 1px solid rgba(34, 36, 38, .1);
    box-shadow: none;
}
.card {
    font-size: 1em;
    overflow: hidden;
    padding: 5;
    border: none;
    border-radius: .28571429rem;
    box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
    margin-top:20px;
} 

.btn {
  margin-top: auto;
}

.filter-group {
    border-bottom: 1px solid #e4e4e4
}
.card-header {
    padding: 0.75rem 1.25rem;
    margin-bottom: 0;
    background-color: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1)
}

.filter-group .card-header {
    border-bottom: 0
}

.icon-control {
    margin-top: 6px;
    float: right;
    font-size: 80%
}

.list-menu {
    list-style: none;
    margin: 0;
    padding-left: 0
}

.list-menu a {
    color: #343a40
}

a {
    text-decoration: none !important;
    background-color: transparent
}