1

我正在开发新应用程序的响应版本，并认识到当页面显示在窄版本上时，按钮和下拉菜单top navbar会移动到其他项目下。

在这种情况下，我梦寐以求的情况只是替换即：

<a href="#"><i class="icon-flag"></i> Very long label of this button</a>

和

<a href="#"><i class="icon-flag"></i></a>

我可以使用“原始”引导程序实现这一目标吗？

我现在唯一的想法是将jQuery链接标签的可见性（即用跨度包装后）与resize()事件合并并切换

<a href="#">
  <i class="icon-flag"></i> <span>Very long label of this button</span></a>

评论和结论的答案

虽然我之前没有指定它，但我的意图是保持自定义设置断点的可能性。这就是为什么我询问narrow version而不是询问phone,tablet和desktop选择器的原因。当然，在大多数情况下默认选择器是可以的，但是media queries给了我额外的灵活性，这是我需要的。

4

2 回答 2

6

它可以通过默认Bootstrap 的响应类来实现：

<a href="#"><i class="icon-flag"></i>
      <span class="hidden-phone">Very long label of this button</span></a>

如果这不能满足您的需求，您可以根据需要media queries将标签设置display:none;为

<a class="target_el" href="#"><i class="icon-flag">
      </i><span>Very long label of this button</span></a>

@media only screen and (min-width:0px) and (max-width:320px)
{
    .target_el span { display:none; }
}

否则你将不得不走 jQuery 路线。

于 2012-08-02T19:46:44.173 回答
3

您可以使用类.hidden-phone或.visible-desktop或.visible-tablet（查看文档）在特定分辨率下隐藏或显示任何元素。

@media由于提供了这些类，因此您真的不应该为此使用查询。

于 2012-08-02T22:26:21.063 回答