使bootstrap中的导航栏仍然有响应
使bootstrap中的导航栏仍然有响应
提问于 2016-08-31 14:45:02
我的UI使用bootstrap框架。我用同样的框架做了一个导航栏。当我减小屏幕尺寸时，我会得到以下输出
不过，如果我缩小窗口大小，我可以看到像这样的折叠按钮
我缩小了窗口，我不想看到像在图像缩小窗口中的那个。，.If。相反，如果我缩小了窗口大小，是否可以在没有缩小窗口阶段的情况下看到折叠按钮？
回答 2
Stack Overflow用户
发布于 2016-08-31 15:11:15
一种选择是，您可能希望尝试测量窗口的宽度，并记录当窗口从主导航过渡到折叠导航时的像素宽度。
您可以通过Google Chrome中的控制台执行此操作：
一旦你有了正确的宽度，就像这样在你的CSS中编写一个媒体查询：
@media (max-width: WIDTH) {
.main-nav {
display: none;
}
.small-nav {
display: visible
}
}在这种情况下，宽度将是Google Chrome提供的像素宽度(即'600px‘或其他值)。确保重命名'main-nav‘和’small nav‘以反映两个导航的类名。
Stack Overflow用户
发布于 2016-08-31 17:19:01
你必须像下面这样添加媒体css调整宽度，并减少元素的填充。
@media screen and (max-width: 992px) {
.nav > li > a {
display: block;
padding: 10px 7px;
position: relative;
}
}当您的窗口调整宽度为768px时切换菜单弹出。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39242507
复制相关文章
相似问题
腾讯云开发者
