如何在移动设备视图中固定抬头视图

Question

我正在创建一个角度应用程序，在其中我有一个带有抬头的详细信息页面，该页面包含两个按钮，即后退和编辑，以及两侧和中间的文本。我使用了引导程序并设置了如下列。

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

下面是我正在使用的代码。我如何解决它以便在移动视图中以单行显示

<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>

Answer 1

您可以采取几种方法。

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>

2. 您可以使用@media查询来隐藏按钮上的文本，仅在移动视图上保留图标。

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

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