如何在移动视图中修复 cardheader 视图

Question

我正在创建一个 angular 应用程序，其中我有一个带有卡片 header 的详细信息页面，它由两个按钮组成，即返回和编辑以及两侧和中间的文本。我使用了 bootstap 并设置了如下列。

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

下面是我正在使用的代码。我怎样才能修复它以在移动视图中以单行查看

<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

您可以采用几种方法。

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

<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 相同的方法减小移动设备上标题的字体大小。

如何在移动视图中修复 cardheader 视图

How to fix the cardheader view in mobile view

html

twitter-bootstrap

angular-ui-bootstrap