Twitter bootstrap 3 断点引导3
我需要一些关于折叠导航栏的帮助。 在较小的设备上,它可以正常工作,但平板电脑肖像由于菜单中的链接太多,导航中断,如何使折叠导航也显示在平板电脑设备上 我没有少用,我已经阅读了BS自定义页面上的文档,但不知道要更改哪些字段:Twitter bootstrap 3 断点引导3,twitter-bootstrap-3,media-queries,Twitter Bootstrap 3,Media Queries,我需要一些关于折叠导航栏的帮助。 在较小的设备上,它可以正常工作,但平板电脑肖像由于菜单中的链接太多,导航中断,如何使折叠导航也显示在平板电脑设备上 我没有少用,我已经阅读了BS自定义页面上的文档,但不知道要更改哪些字段: @网格浮点断点最大值 What do I add here... Point at which the navbar becomes uncollapsed. @网格浮点断点 What do I add here... Point at which the nav
What do I add here...
Point at which the navbar becomes uncollapsed.
What do I add here...
Point at which the navbar becomes uncollapsed.
非常感谢 您不需要定义
@网格浮点断点max
;默认情况下,它是根据@网格浮点断点自动计算的
如果用户的视口(过于简化了一点,是他们的屏幕)的宽度至少为@网格浮动断点
,则导航栏将显示为未折叠(即导航栏项目将显示在水平行中)。如果视口比这窄,则导航栏将折叠到可切换菜单中,该菜单垂直显示导航栏项目。如果您不使用较少的导航栏,并且不想自定义引导构建,则可以使用CSS媒体查询覆盖折叠断点。只要确保这个CSS遵循bootstrap.CSS
@media (max-width: 990px) {
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
}
谢谢@cvrebert,在字段(@grid float breakpoint-1)中,我是否用断点替换1?您根本不应该修改该字段(用于@grid float breakpoint max
)。@user2202463如果此答案令您满意,请将其标记为已接受?非常感谢。在过去的几天里,您已经能够重复使用这个答案了……;)我知道。似乎每天都有关于导航栏断点的问题!所有文字都略有不同,因此不会出现在OP之前的搜索中……谢谢@Skelly!我已将此代码添加到我的自定义样式表中,该样式表位于BS样式表下面。问题是折叠导航会立即打开和关闭,即不会保持打开状态。