如何在引导导航栏中对齐文本和图标

Question

我正在使用Angular 4应用程序，在这里，我有一个带有文字和字体超棒图标的导航栏。

在Web视图中，它的UI很好，但是在移动视图（最小化屏幕）中，它与我的期望不一致。

我已尽力而为，但无法解决。

在最小化视图中：

我如何期望：（示例）

在这里，我附加了stackblitz文件：https://stackblitz.com/edit/angular-bootstrap-carousel-dynamic2-w1qhj4?file=app%2Fapp.component.html

Answer 1

xs适用于所有屏幕尺寸（如果未提供其他功能，则sm不适用于移动屏幕。

<div class="col-md-3 col-xs-12"> <!-- Changes -->
        <div class="container">
          <div class="row">

            <div class="col-xs-2">  <!-- Changes -->
              <i class="fas fa-phone text-white" style="font-size:40px"></i>
            </div>

            <div class="col-xs-10">  <!-- Changes -->
              <div class="container">
                <div class="row">
                  <span class="text-white text-uppercase col-sm-12">Demo 1</span>
                  <span class="text-white col-sm12" style="margin-left: 14px">Text Text</span>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>