Html 角度应用程序视图中的引导4元素定位

我正在开发一个Angular 7博客应用程序，在调整使用bootstrap 4制作的模板视图时遇到了一些困难。在主HTML组件中，我已经连续创建了两张卡片，一张是博客帖子，另一张包含类别。类别卡从另一个组件获取，并使用其选择器调用，即

1） 类别卡片在最后一个博客文档旁边呈现，因此在顶部留下大量空间。如果我在卡片类上应用style
margin top:negative 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">
        <div class="col-12 col-md-9 order-2 order-md-1">
        <div class="row" *ngIf="allBlogs.length>0">
        <div class="col-md-12 card" *ngFor="let blog of allBlogs">
            <div class="row">
                <div class="col-md-4 p-0">
                    <a href="#">
                        <div class="card-img-top card-img-size" style="height: 100%; background-image: url('https://images.pexels.com/photos/1804035/pexels-photo-1804035.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'); background-size: cover; background-position: center;" alt="blog1"></div>
                    </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 href="#" class="mt-auto btn btn-primary">Read More</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
        </div>
        <div class="col-12 col-md-3 order-1 order-md-2" style="margin-top: 1.1%;">
            <app-blog-category></app-blog-category>
        </div>
    </div>
</div>


所有博客








{{blog.title}
{{blog.description}


我应该如何呈现从后端获取的图像而不是背景图像：url？？？如果我把{{blog.imagePath}或{{blog.imagePath}放进去，它就不工作了。但是，如果我把这个img标签放在标签里面，而不是一个div标签里面，它可以正常工作，但是之前的图像问题仍然存在，你只需要把图像的正确路径放进去，我认为如果你加上它，它会比有背景图像的div更好更干净
.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
}

<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">
        <div class="col-12 col-md-9 order-2 order-md-1">
        <div class="row" *ngIf="allBlogs.length>0">
        <div class="col-md-12 card" *ngFor="let blog of allBlogs">
            <div class="row">
                <div class="col-md-4 p-0">
                    <a href="#">
                        <div class="card-img-top card-img-size" style="height: 100%; background-image: url('https://images.pexels.com/photos/1804035/pexels-photo-1804035.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'); background-size: cover; background-position: center;" alt="blog1"></div>
                    </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 href="#" class="mt-auto btn btn-primary">Read More</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
        </div>
        <div class="col-12 col-md-3 order-1 order-md-2" style="margin-top: 1.1%;">
            <app-blog-category></app-blog-category>
        </div>
    </div>
</div>