使用引导程序未正确显示 div答案

【问题标题】：div not showing correctly using bootstrap使用引导程序未正确显示 div
【发布时间】：2020-11-19 04:31:28
【问题描述】：

我试图在同一行显示一些 div，但我不知道为什么不能。当我有 2 行时，包含按钮的 div 位于正确的位置。但是当我只有一行时，按钮将位于第二行。这是我得到的：

这就是我想要的：

HTML：

<div class="row" >
  <div  *ngFor="let field of fields " class="spacing ">
    <div class="display col ">
    <p>Field name: {{field.name}}</p>
    <p>Crop Type: {{field.Crop}}</p>
    <p>Description: {{field.Description}}</p>
    <button >Modify</button>
    <button >View all</button>
  </div>
    </div>
  
  <div class="col-sm-2 ">
  <button class="center" onclick="document.getElementById('frame').style.display = 'block'">Create new field</button>
  </div>
</div>

CSS：

button{
  background-color: #1976d2;
  padding: 16px 32px;
  text-align: center;
  font-size:12px;
  cursor: pointer;
  
  
  
}
.display{
border: 5px solid #1976d2;
padding: 45px;
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
border-radius: 15px;
margin-top:20px;
left: 5%;

    
}
.spacing{
  margin-left: 5px;
}
.center{
  position: absolute;
  top: 50%;
  left: 50%;
}

我怎样才能做到这一点？

【问题讨论】：

标签： html angular bootstrap-4

【解决方案1】：

在引导程序中使用列的正确方法是直接从行元素中获取子元素，因此具有“间距”类的元素应该是 col 类：

<div  *ngFor="let field of fields " class="col-sm-10">
.
.
.
</div>

【讨论】：