Я работаю над приложением для блога 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
}
