Question

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

在这种情况下，我梦寐以求的情况只是取代ie：

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

带

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

我能用'raw'Bootstrap实现这个目标吗？

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

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

评论和结论的答案

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

Answer 1

可以使用默认Bootstrap's responsive classes：

来实现

<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路线。

Answer 2

您可以使用课程.hidden-phone或.visible-desktop或.visible-tablet（查看doc）隐藏或显示某些分辨率上的任何元素。

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

在狭窄版本的页面中隐藏按钮的标签

评论和结论的答案

2 个答案: