- 首页
- 前端开发
- 防止菜单在 768px 显示 CSS 媒体查询中折叠
防止菜单在 768px 显示 CSS 媒体查询中折叠
[英] Prevent menu from collapsing in 768px display CSS media query
本文介绍了防止菜单在 768px 显示 CSS 媒体查询中折叠的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用 twitter bootstrap 做一个网站.我的菜单相对较少，所以它也适合 768px 显示.但默认情况下，在引导程序中，菜单会使用媒体查询折叠.我无法阻止这种行为.
这是我的 html
<div class="span3 logo"><h1><img src="img/logo.png"/></h1></div><div class="span9"><div class="navbar"><div class="navbar-inner"><div class="容器"><a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a><div class="nav-collapse"><ul class="nav nav-pills"><li><a href="#">首页</a><li><a href="#">服务</a><li><a href="#">作品集</a><li><a href="#">联系我们</a>
我知道这与引导程序中的媒体查询有关，但无法理解.
解决方案
您需要在引导站点阅读以下部分:使用媒体查询:http://getbootstrap.com/2.3.2/scaffolding.html#responsive(引导程序 2.3.2)http://getbootstrap.com/getting-started/#disable-responsive(引导程序3)
当您的视口缩小时，您需要使用相关的媒体查询来覆盖引导程序添加的样式.
//横向手机和向下@media(最大宽度:480px){ ... }//横向手机到纵向平板电脑@media(最大宽度:768px){ ... }//纵向平板到横向和桌面@media (min-width: 768px) 和 (max-width: 980px) { ... }//大桌面@media(最小宽度:1200px){..}
如果您不希望导航栏折叠，请从类名中删除折叠".你可能应该摆脱:
简而言之，查看文档，这里有一个部分涵盖了这个标题为可选响应变体"的确切内容:http://getbootstrap.com/2.3.2/components.html#navbar(引导程序 2.3.2)
I am trying to do a site using twitter bootstrap. I am having relatively less menus, so it kind of fits within the 768px display also. But in bootstrap by default, the menu collapses using media queries. I am not able to prevent this behavior.
This is my html
<div class="row">
<div class="span3 logo"><h1><img src="img/logo.png" /></h1></div>
<div class="span9">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse">
<ul class="nav nav-pills">
<li><a href="#">Home</a> </li>
<li><a href="#">Services</a> </li>
<li><a href="#">Portfolio</a> </li>
<li><a href="#">Contact Us</a> </li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
I know it has something to do with the media query in bootstrap, but not able to understand.
解决方案
You'll want to read up the section: Using the media queries at the bootstrap site:
http://getbootstrap.com/2.3.2/scaffolding.html#responsive (Bootstrap 2.3.2)
http://getbootstrap.com/getting-started/#disable-responsive (Bootstrap 3)
You'll want to use the relevant media queries to override the styles bootstrap adds when your viewport shrinks.
// Landscape phones and down
@media (max-width: 480px) { ... }
// Landscape phone to portrait tablet
@media (max-width: 768px) { ... }
// Portrait tablet to landscape and desktop
@media (min-width: 768px) and (max-width: 980px) { ... }
// Large desktop
@media (min-width: 1200px) { .. }
If you don't want the navbar to collapse, remove the 'collapse' from the class name. You should probably get rid of:
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
In short, have a look over the docs, there's a section covering this exact thing titled 'Optional responsive variation' here:
http://getbootstrap.com/2.3.2/components.html#navbar (Bootstrap 2.3.2)
这篇关于防止菜单在 768px 显示 CSS 媒体查询中折叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
