防止菜单折叠在768px显示CSS媒体查询 [英] Prevent menu from collapsing in 768px display CSS media query

问题描述

我试图做一个网站使用twitter bootstrap。我有相对较少的菜单，所以它适合在768px显示也。但在引导默认情况下，菜单使用媒体查询折叠。我无法阻止此行为。

这是我的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-navbardata-toggle =collapsedata-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> 
< li>< a href =＃>服务< / a> < / li> 
< li>< a href =＃> Portfolio< / a> < / li> 
< li>< a href =＃>与我们联络< / a> < / li> 
< / ul> 
< / div> 
< / div> 
< / div> 
< / div> 
 
 
 
< / div> 
< / div> 
  

我知道它与bootstrap中的媒体查询有关，但是无法理解。 / p>

解决方案

您需要阅读以下部分：在引导网站上使用媒体查询
http://getbootstrap.com/2.3.2/scaffolding.html#responsive （ Bootstrap 2.3.2）
http://getbootstrap.com/getting-started/#disable-responsive（Bootstrap 3）

您将需要使用相关的媒体查询来覆盖当视口缩小时引导程序添加的样式。

  //景观手机和向下
 @media（max-width：480px）{...} 
 
横向手机到纵向平板电脑
 @media（max-width：768px）{...} 
 
 //纵向平板电脑到横向和桌面
 @media 768px）和（max-width：980px）{...} 
 
 //大型桌面
 @media（min-width：1200px）{..} 
  

如果您不想折叠导航栏，请从类名中删除'collapse'。您应该可以删除：

 < a class =btn btn-navbardata-toggle =collapsedata -target =。nav-collapse> 
  

简而言之，查看文档，变化：
http://getbootstrap.com/2.3.2/components.html#navbar （Bootstrap 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屋！