使用引导程序无法正确显示div

Question

我试图在同一行上显示一些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%;
}

我该如何做？

Answer 1

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

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