防止菜单在 768px 显示 CSS 媒体查询中折叠

Posted 2023-03-06

【中文标题】防止菜单在 768px 显示 CSS 媒体查询中折叠

【英文标题】：Prevent menu from collapsing in 768px display CSS media query

【发布时间】：2012-04-23 01:57:31

【问题描述】：

我正在尝试使用 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-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>

我知道这与引导程序中的媒体查询有关，但无法理解。

【参考方案1】：

这是我用于引导程序 3.3.4 的内容。这是一个 hack，但也不是 2 天的修复重做 css。

@media (min-width: 768px) and (max-width: 979px) 
  .navbar-header 
    width: 100% !important;
  
  .navbar-toggle 
    display: inline-block !important;
    float: right !important;
  

您可能需要调整选择器，但基本上，将标题设为全角，然后显示并向右浮动按钮。

【讨论】：

我可以在右侧看到 3 栏菜单，但主菜单仍然可见。此外，3 栏图标不会单击。有人可以建议我吗？我正在使用 Bootstrap 3.3.7。谢谢。

【参考方案2】：

您可以从 sass-twitter-bootstrap scss 文件中自定义 Twitter Bootstrap css 编译，并将 _variables.scss 中的 $navbarCollapseWidth 设置为您想要的值...

编辑

正如@Accipheran 在 cmets 中所述，对于 Bootstrap 3.x，您应该设置的变量名称是 $grid-float-breakpoint。

【讨论】：

我遇到了完全相同的问题。我希望导航栏在手机上折叠，而不是在 iPad 上。这就是答案。将$navbarCollapseWidth 设置为767px。 iPad 的宽度为 768 像素，因此不会折叠。这是正确的答案，并且比手动覆盖多个媒体查询要干净得多。

@emkman 当然它是最好的解决方案。如果您使用它，也可以与 LESS 一起使用！

@emkman 请不要使用 767px...不是每个人都有 iPad...只需使用您实际想要的像素数，不要只满足 iPad屏幕。

@DanRasmussen 如果您阅读我的评论，我特别提到 iPad 是有原因的。我的目标是 iPad，因此 767px 是我真正想要的像素数。

对于 bootstrap 3，您需要设置的变量是 $grid-float-breakpoint。此外，您可以在调用 @import "bootstrap" 行之前的任何位置在自己的 css 文件中设置此变量，而不是进入引导源。

【参考方案3】：

如果您想完全禁用折叠导航栏，请在您的自定义 LESS 文件中添加此变量：

@grid-float-breakpoint: 0px;

【参考方案4】：

查找变量：

@grid-float-breakpoint

设置为@screen-sm，你可以根据自己的需要更改。

如果覆盖vendorless文件，将变量设置为0px，例如：

@grid-float-breakpoint: 0px;

【参考方案5】：

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

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

  // 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)  .. 

如果您不希望导航栏折叠，请从类名中删除“折叠”。您可能应该摆脱：

<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

简而言之，请查看文档，这里有一个部分涵盖了这个确切的内容，标题为“可选的响应式变体”： http://getbootstrap.com/2.3.2/components.html#navbar（引导程序 2.3.2）

【讨论】：

我也有同样的问题，但您链接中的页面没有帮助。我正在寻找的是菜单在 iPhone 上折叠而不是在 ipad 上折叠。该页面没有解释如何做到这一点。有什么提示吗？

使用媒体查询——你想要的是最大宽度：480px。如果您查看 Bootstrap 响应式 CSS，您会看到如下部分：gist.github.com/2585018。删除改变导航栏的部分，并将它们放在 max-width:480px 部分。

所以如果我理解正确，您是说要从@media max-width: 768px 中删除折叠功能？

是的，然后将其转储到 max-width:480px 中。应该是犹太教的。

下面的答案是最直接的。即使您使用的是静态引导程序，您也可以在twitter.github.com/bootstrap/customize.html#variables 更改@navbarCollapseWidth 并下载自定义版本。

【参考方案6】：

阅读答案，我相信您正在谈论 Bootstrap 版本 2。也许有人正在寻找 Bootstrap 3 的答案。这个答案是给你的！

转到Bootstrap customization page 为硬编码（例如 520 像素）或较小的屏幕尺寸（如 @screen-xs-min）重新定义 @grid-float-breakpoint 值 按页面底部的按钮重新编译css文件 用下载的 zip 文件中的文件替换您的 bootstrap.css 和 bootstrap-min.css 文件。

【讨论】：

如果我只希望子导航菜单而不是主菜单发生这种情况怎么办？这似乎并不容易，因为引导程序本身（还）没有子导航...... :(

【参考方案7】：

本例来自官网：http://getbootstrap.com/examples/non-responsive/

更改在 non-responsive.css 中，但与 .navbar 有关的重要部分是：

body 
    padding-top: 70px;
    padding-bottom: 30px;

.page-header 
    margin-bottom: 30px;

.page-header .lead 
    margin-bottom: 10px;

.navbar-collapse 
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;

.navbar-nav 
    float: left;
    margin: 0;

.navbar-nav > li 
    float: left;

【参考方案8】：

如果您只想让导航不折叠直到它达到较小的值，最简单的方法是转到Twitter Bootstrap customization page，将@navbarCollapseWidth 更改为您想要的值，然后下载包.完成。

如果您想在此页面允许的范围之外进行自定义，则必须按照其他答案中的说明进行覆盖或自定义。

【参考方案9】：

这对我很有效：

.nav-collapse, .nav-collapse.collapse 
    overflow: visible;
   
.navbar .btn-navbar 
    display: none;
   

【讨论】：

这是正确的答案。把它放到@media (min-width: 768px) 和 (max-width: 979px) 中，它工作得很好。无需更改引导程序文件，并按照引导程序的工作方式完成，并带有覆盖。

现在是 .navbar-toggle 而不是 .btn-navbar

@SerjSagan 这两个选项都不适用于 Bootstrap 3。我仍然得到一个较小尺寸的垂直菜单。