角度 7 中的引导程序 4 布局答案

【问题标题】：bootstrap 4 layout in angular 7角度 7 中的引导程序 4 布局
【发布时间】：2020-02-29 12:26:40
【问题描述】：

我正在尝试从中等屏幕尺寸创建一个带有引导网格系统的模板，如下图所示，但无法这样做。以下是我的代码：

HTML：

 <div class="container-fluid" style="text-align:center">
    <div class="row" style="text-align:center">
      <div class="col-md-12" style="font-size:22px">All Blogs </div>
      <br><br><br><br>
    </div>
    <br>
    <br>
    <div class="row col-md-12 py-3" *ngIf="allBlogs.length>0">
     <!--  Card Start -->
      <div class="card" *ngFor="let blog of allBlogs">
        <div class="row">
              <div class="col-md-3">
                <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-5 px-3">
            <div class="card-block px-6">
              <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>
    <br>
      <app-blog-category></app-blog-category>
  </div>
</div>

【问题讨论】：

标签： html css bootstrap-4 angular7

【解决方案1】：

这是一个基于图像的模板。由于 bootstrap 使用 12 列系统，因此我使用了 8 和 4 网格大小，但可以根据需要随意更改这些数字。

<div class="container-fluid">
<div class="row">

 //this col contains your three card rows
 <div class="col-md-8">
  <div class="row"> 
   <div class="col"> </div>
  </div>

  <div class="row"> 
   <div class="col"> </div>
  </div>

  <div class="row"> 
   <div class="col"> </div>
  </div>
 </div>

 //this is for your shared component
 <div class="col-md-4"> 
  <shared-component></shared-component>
 </div>
</div>
</div>

【讨论】：