Css 推特引导:折叠菜单以获得更高分辨率的屏幕,如大型桌面

Css 推特引导:折叠菜单以获得更高分辨率的屏幕,如大型桌面,css,twitter-bootstrap,responsive-design,media-queries,Css,Twitter Bootstrap,Responsive Design,Media Queries,我正在使用twitter引导建立我的网站。我想专门针对智能手机和平板电脑设备开发我的网站。智能手机和ipad(人像模式)设备的导航栏完全崩溃了。对于更高分辨率的设备,如ipad横向模式和大型桌面,我需要相同的折叠导航栏 在bootstrap-responsive.css文件中,如果我可以将宽度从979px最大到更高的分辨率,例如1024px和1200px,它确实起作用了。这是正确的方法吗 导航栏片段 <div class="navbar navbar-fixed-top navba

我正在使用twitter引导建立我的网站。我想专门针对智能手机和平板电脑设备开发我的网站。智能手机和ipad(人像模式)设备的导航栏完全崩溃了。对于更高分辨率的设备,如ipad横向模式和大型桌面,我需要相同的折叠导航栏

在bootstrap-responsive.css文件中,如果我可以将宽度从979px最大到更高的分辨率,例如1024px和1200px,它确实起作用了。这是正确的方法吗

导航栏片段

    <div class="navbar navbar-fixed-top navbar-absolute">
      <div class="navbar-inner">
        <div class="container" style="width: auto;">
          <a class="btn btn-navbar custom-collapse-btn" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="http://www.test.com/" target="_blank"><img src="img/logo.png" border="0" /></a>
          <div class="pull-right icon-custom-search"></div>
          <div class="nav-collapse">
            <ul class="nav">          
              <li>
                <ul class="nav" id="nav-menu-left">
                  <li><a href="#">LMenu1</a></li>
                  <li><a href="#">LMenu2</a></li>
                  <li><a href="#">LMenu3</a></li>
                  <li><a href="#">LMenu4</a></li>
                  <li><a href="#">LMenu5</a></li>
                  <li><a href="#">LMenu6</a></li>
                </ul>
              </li>
              <li>
                <ul class="nav" id="nav-menu-right">
                  <li><a href="#"><img src="img/icon-newsletter.png" border="0" /> Rmenu1</a></li>
                  <li><a href="#"><img src="img/icon-register-login.png" border="0" /> Rmenu2</a></li>
                  <li><a href="#"><img src="img/icon-download-app.png" border="0" /> RMenu3</a></li>
                </ul>
              </li>
              <div id="nav-copyright-text"><a href="#">This is test text/a></div>          
            </ul>
          </div><!-- /.nav-collapse -->
        </div>
      </div><!

-- /navbar-inner -->
</div>

编辑核心文件是个坏主意。坚持利用媒体查询完成任务

<link rel='stylesheet' media='screen and (min-width: 979px) and (max-width: 1024px)' href='css/medium.css' />


并且更高效地完成任务。

我没有对核心文件进行任何更改,我创建了一个自定义css文件并在那里进行了所有更改。然后,我在理解您的问题时弄错了,但这是一种正确的方式,因为我认为您仍然没有理解我的问题。让我为你们简化我的问题,我需要折叠导航栏以获得更大的分辨率,如Ipad横向和更大的桌面。我使用媒体查询最大宽度和最小宽度来获得不同的分辨率。我仍然觉得要么你没有理解我的问题,要么你没有尝试引导。
<link rel='stylesheet' media='screen and (min-width: 979px) and (max-width: 1024px)' href='css/medium.css' />