我正在使用bootstrap来调整一堆制表符,以均匀地适应父元素的宽度。这对我来说很重要。但是Bootstrap会自动为较小的设备折叠这些制表符,给它们100%的宽度,这是我不想要的。
如何禁用此功能?
简单代码:
<ul class="nav nav-tabs nav-justified">
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
我正在使用bootstrap来调整一堆制表符,以均匀地适应父元素的宽度。这对我来说很重要。但是Bootstrap会自动为较小的设备折叠这些制表符,给它们100%的宽度,这是我不想要的。
如何禁用此功能?
简单代码:
<ul class="nav nav-tabs nav-justified">
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
3条答案
按热度按时间kmpatx3s1#
你可以添加一个类为col-xs-12的容器,这样它就可以堆叠在很小的显示器上。毕竟,如果你想让它在所有显示器上都不堆叠,只需写一个媒体查询。
请查看媒体查询:http://getbootstrap.com/css/#grid
如果你分享更多的代码,那么我可以更具体的答案。
lnvxswe22#
你必须增加宽度:1%,使其拉伸
vvppvyoh3#
这些答案都不正确。Bootstrap有一个内置的简单方法来实现这一点,就像它处理顶部菜单的折叠一样。
1.将
navbar-default
类添加到nav
元素中,如果没有这个类,nav
元素将折叠,但不会有小的展开图标(单击展开的三条水平线)。1.将类
navbar-collapse collapse
添加到包含应折叠的链接的内部div。1.在应该折叠的div之前添加
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
。这将出来相当混乱,试图剪切和粘贴我的3个步骤以上;我所做的是从我的工作导航栏复制并粘贴这些部分在顶部,然后将它们一个接一个地粘贴进去。2这3个元素是你所需要的,虽然:默认导航栏、折叠导航栏和按钮。