【问题标题】：Bootstrap Pills with Badges: Hide non-badge text on mobile带有徽章的 Bootstrap Pills：在移动设备上隐藏非徽章文本
【发布时间】：2016-03-27 13:12:05
【问题描述】：

我有一个与 angular 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 解决方案。

当前行为：

期望的行为：

感谢您的宝贵时间。

【问题讨论】：

标签： css angularjs twitter-bootstrap

【解决方案1】：

您可以将要放在一边的文本包装在具有.hidden-xs 类的<span> 元素中。这将使它们在小屏幕中不可见，例如小于 768 像素。

<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 工作示例。

【讨论】：

注意：如果您想避免堆叠但保持“合理”效果，请查看此答案stackoverflow.com/a/26004988/2851870。

【解决方案2】：

您可以使用 .hidden-xs 和 .visible-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。

希望对你有帮助！

【讨论】：