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

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

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

我已经尽了最大的努力，但我无法解决它

在最小化视图中：

我的期望：（示例）

---

这里我附上了stackblitz文件：

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>

演示1
文本

应用这些更改

xs

适用于每种屏幕大小如果没有提供任何其他设置，

sm

不适用于移动屏幕。但是我无法使其居中对齐，您能给我一些建议@SumanKunduTry在

行

旁边添加

mx auto

类吗，它所做的是将

margin

left和right设置为

auto

。