如何在移动视图中修复卡片标题视图答案

【问题标题】：How to fix the cardheader view in mobile view如何在移动视图中修复卡片标题视图
【发布时间】：2020-01-22 22:03:40
【问题描述】：

我正在创建一个 Angular 应用程序，其中我有一个带有卡片标题的详细信息页面，该页面由两个按钮组成，即返回和编辑，两侧和中间的文本。我使用了引导程序并设置了如下所示的列。

但是当我在移动视图中看到屏幕时，标题没有正确对齐

以下是我正在使用的代码。我如何修复它以在移动视图中单行查看

<div class="card-header">
      <div class="row">
        <div class="col-sm-3 col-lg-3 text-left">
          <button size="sm" class="btn btn-primary" (click)="goBack()">
            <i class="fa fa-chevron-left"></i>&nbsp; Back
          </button>
        </div>
        <div class="col-sm-6 col-lg-6 text-center">
          <h4>Switch Detail</h4>
        </div>
        <div class="col-sm-3 col-lg-3 text-right">
          <button size="sm" class="btn btn-primary" (click)="gotoEdit()">
            <i class="fa fa-pencil"></i>&nbsp; Edit
          </button>
        </div>
      </div>
    </div>

【问题讨论】：

您可以隐藏按钮文本，只在移动视图上保留图标。

标签： html twitter-bootstrap angular-ui-bootstrap

【解决方案1】：

您可以采用几种方法。

您可以强制容器的宽度在所有视图上保持不变。请注意，这可能会导致您的文本溢出。

<div class="card-header">
      <div class="row">
        <div class="col-3 text-left">
          <button size="sm" class="btn btn-primary" (click)="goBack()">
            <i class="fa fa-chevron-left"></i>&nbsp; <span class="button-text"> Back 
          </span>
          </button>
        </div>
        <div class="col-6 text-center">
          <h4>Switch Detail</h4>
        </div>
        <div class="col-3 text-right">
          <button size="sm" class="btn btn-primary" (click)="gotoEdit()">
            <i class="fa fa-pencil"></i>&nbsp; <span class="button-text"> Edit </span>
          </button>
        </div>
      </div>
</div>

您可以使用 @media 查询隐藏按钮上的文本，只在移动视图上留下图标。

@media screen and (max-width: 560px) {
  button-text {
    display: none;
  }
}

或者，您可以在移动设备上使用与上述情况 2 相同的方法来减小标题的字体大小。

【讨论】：