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

【问题标题】：Bootstrap-4.5 - Grid for mobile rows and columnsBootstrap-4.5 - 移动行和列的网格
【发布时间】：2020-12-05 12:45:46
【问题描述】：

我想尝试解决这个问题：

我正在使用 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房间图标”一样，居中。

你能帮帮我吗？

谢谢！

【问题讨论】：

您使用的是哪个版本的 Bootstrap？
嗨@DavidLiang Bootstrap v4.5.2
那么就没有 'col-xs-' 类了。请改用“col-”。
是的，我知道，因此我标记了“我正在使用 col-xs，因为如果我只使用“col””。当我只使用“col”时，设计就会中断。 @DavidLiang 感谢您的宝贵时间
在 codepen 上编写代码以获取更多详细信息

标签： bootstrap-4 responsive-design grid

【解决方案1】：

我已经做了一个解决方法：

我发布我的答案以防万一其他人方便：

 <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 行。一切都很好。

【讨论】：