bootstrap 4 позиционирования элемента в представлении Angular приложения

Question

Я пытаюсь создать шаблон блога, используя bootstrap 4 в приложении angular 7, где мне нужно создать две карточки подряд, одна из которых должна быть в блоге, а другая - в категории. Карта категорий извлекается из другого компонента и вызывается с помощью селектора, т.е. <app-blog-category></app-blog-category> в основном компоненте HTML. Пожалуйста, посмотрите на изображение ниже для справки. Ниже приведены проблемы, с которыми я сталкиваюсь на виде.

1) изображение внутри горизонтальной карты не занимает всю высоту и ширину карты

2) вторая карта, т.е. категория становится вертикально центрированной.

HTML:

<div class="container">
    <div class="row col col-lg-12" style="text-align:center; font-size:22px">All Blogs
      <br><br><br><br>
    </div>
    <div class="row" *ngIf="allBlogs.length>0">
      <div class="col-lg-9 card" *ngFor="let blog of allBlogs">
        <div class="row">
          <div class="col-md-4">
            <a [routerLink]="['/blog', blog.id]">
<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 href="#" class="mt-auto btn btn-primary">Read More</a>
        </div>
      </div>
    </div>
      </div>
      <div class="col-md-3">   //note that this part is called from a separate angular component by it's selector
        <div class="container">
    <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 {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0.37rem
}

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

Answer 1

1) Изображение похоже на это, потому что оно идет на полную ширину и пропорционально увеличивается. Левый пробел возникает из-за левого отступа в родительском div с классом col-md-4.
Существуют различные способы его решения, но я бы рекомендовал использовать <div> с background-image: url(), background-size: cover и background-position: center вместо тега <img> в этом случае и добавьте height: 100% для подгонки по вертикали. Я вставил CSS в строку, но вы можете использовать класс. Для отступа слева добавьте класс Bootrstrap: pl-0, чтобы удалить все padding-left;

<div class="col-md-4 pl-0">
  <a href = "#">
    <div class="card-img-top card-img-size" [ngStyle]="{'height': '100%', 'background-image': 'url(' + blog.imagePath + ')', 'background-size': 'cover', 'background-position': 'center'}" alt="blog1"></div>
  </a>
</div>

2) Проблема возникает потому, что только после последней карты, добавленной в L oop, что карта категорий добавляется. Таким образом, карта категорий заканчивается рядом с последней картой, дополняющей col-9 с col-3.

. Вы можете обернуть все центральные карты в столбец и изменить .col-9 карт, чтобы они были .col-12 , Это решит это.

<div class="row" *ngIf="allBlogs.length>0">

  <div class="col">
    <div class="col-md-12 card" *ngFor="let blog of allBlogs">
      <div class="row">
        <div class="col-md-4 pl-0">
          <a href = "#">
            <div class="card-img-top card-img-size" [ngStyle]="{'height': '100%', 'background-image': 'url(' + blog.imagePath + ')', '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 class="col-md-3 col-sm-12">
    <app-blog-category></app-blog-category>
  </div>

</div>