Css 带徽章的引导程序：在手机上隐藏非徽章文本

我有一个与angular ui router连接的多步骤表单，顶部有一个小引导导航：

<ul class="nav nav-pills nav-justified">
  <li ui-sref-active="active"><a ui-sref=".amount">Step <span class="badge">1</span> Amount</a></li>
  <li ui-sref-active="active"><a ui-sref=".card">Step <span class="badge">2</span> Payment</a></li>
  <li ui-sref-active="active"><a ui-sref=".contact">Step <span class="badge">3</span> Contact</a></li>
  <li ui-sref-active="active"><a ui-sref=".confirm">Step <span class="badge">4</span> Confirm</a></li>
</ul>

期望的行为：

谢谢您的时间。
您可以使用.hidden xs和.visible xs-*例如：



步骤1金额
第2步付款
步骤3联系人
步骤4确认


1
2
3
4


并将
class='col-xs-3'
添加到移动设备中的每个
li

希望有帮助
 您可以在包含
.hidden xs
类的
元素中包装要放在边上的文本。这将使它们在小屏幕中不可见，例如小于768px的屏幕

<ul class="nav nav-pills nav-justified">
  <li ui-sref-active="active"><a ui-sref=".amount"><span class="hidden-xs">Step </span><span class="badge">1</span><span class="hidden-xs"> Amount</span></a></li>
  <li ui-sref-active="active"><a ui-sref=".amount"><span class="hidden-xs">Step </span><span class="badge">2</span><span class="hidden-xs"> Amount</span></a></li>
  <li ui-sref-active="active"><a ui-sref=".amount"><span class="hidden-xs">Step </span><span class="badge">3</span><span class="hidden-xs"> Amount</span></a></li>
  <li ui-sref-active="active"><a ui-sref=".amount"><span class="hidden-xs">Step </span><span class="badge">4</span><span class="hidden-xs"> Amount</span></a></li>
</ul>

查看工作示例。
注意：如果您希望避免堆叠，但保持“合理”效果，请查看此答案。
<ul class="nav nav-pills nav-justified">
  <li ui-sref-active="active"><a ui-sref=".amount"><span class="hidden-xs">Step </span><span class="badge">1</span><span class="hidden-xs"> Amount</span></a></li>
  <li ui-sref-active="active"><a ui-sref=".amount"><span class="hidden-xs">Step </span><span class="badge">2</span><span class="hidden-xs"> Amount</span></a></li>
  <li ui-sref-active="active"><a ui-sref=".amount"><span class="hidden-xs">Step </span><span class="badge">3</span><span class="hidden-xs"> Amount</span></a></li>
  <li ui-sref-active="active"><a ui-sref=".amount"><span class="hidden-xs">Step </span><span class="badge">4</span><span class="hidden-xs"> Amount</span></a></li>
</ul>

@media (max-width: 767px) { 
    .nav-justified > li {
        display: inline;
    }
    .nav-justified > li {
        float: left;
    }
}