仅在自举导航栏折叠时显示链接文本

如何在链接的图标/徽章旁显示链接文本只有当折叠navbar？仅在自举导航栏折叠时显示链接文本

现在我bootstrap3驱动navbar只使用图标，当它没有折叠：

enter image description here

当navbar被折叠这是有问题的：

enter image description here

...链接旁边没有描述性文字，但显然有空间。删除文字描述是为了节省空间，但是一旦崩溃就有足够的空间......而且它没有描述就会有缺陷，因为很多房地产都被占用了。

我已经通过辅助类一看，在文档中collapse功能，并试图把<span class='collapse in'>标签将包括文本，该badge或标签之后。

当我这样做时，文本总是可见的，不仅仅当navbar被折叠时。根据浏览器的实际宽度，我不想使用或其他类似的类。

什么是检测元素的正确方法是折叠的navbar，只显示文本在这种情况下？

这里有一个要点：https://gist.github.com/digitalextremist/6e70807a8b0e3c3da993

而且bootply：http://www.bootply.com/105538

来源

2014-01-13 digitalextremist

你可以创建一个[Bootply]（http://bootply.com）或者你的代码吗？ – ZimSystem

并添加了一个要点。也用于bootply。我看你是这个的创造者。从未使用它。看起来非常有用。 – digitalextremist

有什么理由不使用jQuery？只是好奇。 http://stackoverflow.com/a/18568776/2930161 – tkymtk

什么

.navbar-collapse .text-you-want-hidden-on-desktop { 
    display: none; 
} 

.navbar-collapse.in .text-you-want-hidden-on-desktop { 
    display: inline; 
}

我相信上面关于jQuery的是暗示你可以看为show.bs.collapse事件的评论，并采取相应行动。有关该事件的更多信息： http://getbootstrap.com/javascript/#collapse

但我相信你可以用CSS来实现你想要的。

来源

2014-01-31 21:18:23 emptywalls

到目前为止，这工作，但打开可折叠版本的导航栏时会稍微延迟。你对这件作品有补救吗？ – digitalextremist

我使用这种方法看到的另一个问题是，如果窗口调整为小，菜单打开，然后调整大小再次超过阈值，那么'.in'类将保持不变。使这种方法非理想 – mix3d

延迟当菜单正在移动/动画时，由css类'.collapsing'替换'.collapse'和'.collapse.in'。您可以通过添加'.navbar-collapse.collapsing .text-you-want-hidden-on-desktop {display：inline;}'来修复延迟，以确保它在菜单移动时显示，但你仍然遇到上面解释的状态问题，在屏幕未折叠/大于移动中断的情况下，最终可能会显示它们。 – mix3d

我试图做类似于类似于.in类的jQuery的Bootstrap的Collapse插件，但是它不是非常可靠，因为在导航栏会崩溃然后不收缩之后，类会留下来。

我推荐使用CSS媒体查询。在Bootstrap 3的navbar.less文件中，786px用作折叠导航栏的断点，所以我建议在CSS中使用它。

/* standard navbar */ 
@media (min-width: 768px) { 
    ... 
} 

/* mobile navbar */ 
@media (max-width: 767px) { 
    ... 
}

来源

2014-06-07 00:26:31

感谢您的支持。这解决了我在其他答案中询问的延迟问题。最佳答案。 – digitalextremist

也许有点晚，但对于偶然遇到这个问题的人有用：最好使用引导变量'@ grid-float-breakpoint'和'@ grid-float-breakpoint-max'来代替具体的像素值，所以如果你想改变你的断点，你的代码不会中断。 – dorthrithil

你是对的，但你只能在你自己构建Bootstrap时使用它们（如果你使用Less或Sass，那么建议使用它）。 –

也许我不明白这个问题的正确性，但不是像使用隐藏类一样简单吗？

<li class="hidden-xs"><a href="#">Action</a></li>

来源

2015-04-23 19:02:04 pungggi

这是一个完美的选择！但是，我认为他在寻找'.visible-xs-inline'，为现有下拉菜单添加一行文本，而不是添加新的文本。新答案即将到来。 – mix3d

去关@ pungggi的回答是：

由于引导已经定义的媒体查询断裂，有助手响应类来说明基于相同的符/隐藏的东西，网格使用：hidden-(size)和visible-(size) 。这样，如果您制作了基于less/sass的模板，则不必在多个位置更改@ media-query参数。（参见http://getbootstrap.com/css/#responsive-utilities-classes更多信息）

所以添加与.visible-xs-inline类span或p标签将确保指定的文本中仅示出当屏幕被确定“XS”，它被用来作为断裂点为折叠导航菜单，并且-inline部件将确保它以内联方式显示，因为默认情况下，.visible-xs将使用display:block。

代码片段：

<ul class="nav navbar-nav navbar-right"> 
     <li class="dropdown"> 
      <a href="#" data-toggle="dropdown"> 
       <span class="fa fa-plus"></span> 
       <!-- The following span will only show 
        when the nav menu is collapsed --> 
       <span class="visible-xs-inline">ADD SOMETHING BUTTON</span> 
      </a> 
      <!-- all the dropdown stuff --> 
     </li> 

     <li class="dropdown"> 
      <a href="#" data-toggle="dropdown"> 
       <span class="fa fa-compass" title="Energy Compass"></span> 
       <span class="visible-xs-inline">ENERGY COMPASS</span> 
      </a> 
      <!-- all the dropdown stuff --> 
     </li> 
     <!-- continued list --> 
    </ul>

注：我建议使用CSS填充/保证金，或 的，以确保跨度文本是正确填充，但不会青少年。

来源

2015-08-04 16:01:11 mix3d

我只是把它添加到我自己的应用程序，它比添加额外的CSS与媒体查询只是为了隐藏导航中的一些文本更容易/更清洁 – mix3d

此外，显然是非显示指定的类，（'.visible -sm' vs'.visible-sm-block'）折旧，并且将在Bootstrap v4中被删除。你懂得越多！ – mix3d

仅在自举导航栏折叠时显示链接文本

回答

相关问题