带徽章的Bootstrap药丸：隐藏移动设备上的非徽章文字

Question

我有一个多步形式的连接角度ui路由器，顶部有一个小引导导航：

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

在较大的屏幕上看起来光滑，但每个药丸中的文字数量使它们在移动大小的屏幕上占据自己的线条。我希望每个药丸的非徽章内容在小尺寸屏幕上消失，如下面的屏幕所示。

我可以使用额外的span标签快速完成此操作，但我想知道是否有可以应用的纯CSS解决方案。

当前行为：

所需行为：

感谢您的时间。

Answer 1

您可以在<span>类的.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>

此外，要禁用堆叠，您可以添加以下CSS

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

请参阅here工作样本。

Answer 2

您可以使用.hidden-xs和.vi​​sible-xs- * http://getbootstrap.com/css/#responsive-utilities之类的：

<!-- invisible in mobile -->
<ul class="nav nav-pills nav-justified hidden-xs">
  <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>

<!-- visible only in mobile -->
<ul class="nav nav-pills nav-justified visible-xs-*">
  <li ui-sref-active="active" class='col-xs-3'><a ui-sref=".amount"><span class="badge">1</span></a></li>
  <li ui-sref-active="active" class='col-xs-3'><a ui-sref=".card"><span class="badge">2</span></a></li>
  <li ui-sref-active="active" class='col-xs-3'><a ui-sref=".contact"><span class="badge">3</span></a></li>
  <li ui-sref-active="active" class='col-xs-3'><a ui-sref=".confirm"><span class="badge">4</span></a></li>
</ul>

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

希望它有所帮助！