Bootstrap-4.5-移动行和列的网格

问题描述

我想尝试解决此问题：

我正在使用Bootstrap，我所做的是：

 <div class="card text-center">
  <div class="card-header" style="background-color: rgb(192,193,194);">
  </div>
  <div class="card-body">
    <div class="container">
      <div class="row">
        <div class="col-xs-2">
          <h1 class="price-text font-weight-bold">${{asdasd}}</h1>
          <p>Reportado por: Fabrizio</p>
          <p>0 Confirmaciones</p>
        </div>
        <div class="col-xs-1">
          <div class="row">
            <a href="#" class="btn btn-success btn-circle btn-xs">CONFIRMAR</a>
          </div>
          <div class="row">
            <a href="#" class="btn btn-warning btn-circle btn-xs" 
              data-toggle="modal">
               ACTUALIZAR
            </a>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-2">
          <h5 class="brand-text font-weight-bold text-left">{{ asdasd }}</h5>
          <p class="address-text text-left">{{ asdasd }}</p>
          <p class="address-text text-left">{{ asdsad }}</p>
        </div>
        <div class="col-xs-1 col-centered">
          5Kms
          <a target="_blank" href="#">
            <i class="material-icons md-36">room</i>
          </a> 
        </div>
      </div>                  
    </div>
  </div>
</div>

我正在使用col-xs，因为如果我仅使用“ col”，我将无法获得良好的结果...我正在开发此页面，仅出于移动电话的原因，因此我想获得事物的顺序在正确的地方。我想使用右边的按钮，并与“ 5Kms房间图标”相同，将其居中。

你能帮我一下吗？

谢谢！

解决方法

我已经有了解决方法：

我发布我的答案，以防万一对其他人有用：

 <div class="col-xs-3">
  <div class="row">
    <a href="#">
      <i class="material-icons">check</i>
    </a>
    <a href="#" data-toggle="modal" data-target="#UpdatePrice" (click)="loadUpdatePriceData(station)">
      <i class="material-icons">priority_high</i>
    </a>
  </div>
</div>

我只使用1行，而不是2行。一切都很好。