用ChatGPT解决这个技术问题 Extra ChatGPT

如何使用 Twitter 引导响应更改导航栏折叠阈值？

我在 Rails 3.1.2 项目中使用 Twitter Bootstrap 2.0.1，用 bootstrap-sass 实现。我正在加载 bootstrap.css 和 bootstrap-responsive.css 文件，以及 bootstrap-collapse.js Javascript。

我有一个流畅的布局，其导航栏类似于 example。这遵循导航栏“响应变化”说明 here。它工作正常：如果页面窄于大约 940 像素，导航栏会折叠并显示一个“按钮”，我可以单击该按钮展开。

然而，我的导航栏看起来不错，大约 550 像素宽，即它不需要折叠，除非屏幕非常窄。

如果屏幕宽度小于 550 像素，我如何告诉 Bootstrap 仅折叠导航栏？

请注意，此时我不想修改其他响应行为，例如堆叠元素而不是并排显示它们。

好问题！根据您在问题中提供的信息，我能够从零开始实现可折叠的导航栏。谢谢！

B
Brad

引导 > 2.1 && < 3

使用较少版本的引导程序

更改 variables.less 中的 @navbarCollapseWidth 变量

重新编译。

2013 年更新：简单的方法

访问 http://getbootstrap.com/customize/#less-variables

在表单域中更改@navbarCollapseWidth

单击“编译和下载”。

（THX 通过评论致 Archonic）

2014 年更新：Bootstrap 3.1.1 和 3.2（他们甚至 added it to the documentation）

如果您正在 customizing 或覆盖/编辑 .less 变量，您正在寻找： 

//** Point at which the navbar becomes uncollapsed.
@grid-float-breakpoint:     @screen-sm-min;
//** Point at which the navbar begins collapsing.
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
您可以访问 twitter.github.com/bootstrap/customize.html#variables 并更改宽度并下载。无需编译。
更新的链接和按钮文本：getbootstrap.com/customize/#less-variables & “编译和下载”
如果您在 boostrap_and_overrides.css.less 中添加类似 @navbarCollapseWidth: 600px; 的内容，这也适用于 twitter-bootstrap-rails gem。
这似乎不再是 Bootstrap 3 中的事情。:(
Bootstrap 4 怎么样？
J
Justin Morgan

您正在查找 bootstrap-responsive.css 的第 239 行 

@media (max-width: 979px) {...}

max-width 值触发响应式导航的位置。将其更改为 550px 左右，它应该可以很好地调整大小。

谢谢。 bootstrap-responsive.css 隐藏在 bootstrap-sass gem 中。是的，我可以编辑它，但是当 gem 更新时，我必须再做一次。有没有办法覆盖@media 查询，类似于覆盖其他 CSS 元素？
如果不重新声明所有 CSS 声明，我想不出任何方法来实现覆盖。
好的谢谢。我尝试了这种方法，覆盖了 gem 代码中的那一行，它有点工作，但我在 767px 宽度以下的导航栏中得到了额外的水平填充，大概是因为 @media (max-width: 767px) 块中的 CSS。看起来我将不得不按照 Andres Ilich 的回答中的建议进行更广泛的覆盖。
正如我在对@Andres Ilich 的回答的评论中提到的那样，在可维护性方面，直接更新源代码似乎是两害相权取其轻，所以我现在会接受这个解决方案。我可以接受 767px 作为最小阈值，尽管我可以通过为不受 @media (max-width: 767px) 影响的导航栏创建自定义容器来进一步降低该阈值。希望 Bootstrap（或 bootstrap-sass）有一天会包含一种使用变量来设置阈值的方法，但我认为这需要 interpolation in media selectors。
Bootstrap 3 的导航栏断点覆盖 CSS 已更改 - 这是 3.1 的工作示例：bootply.com/120604
t
thirtydot

您可以建立一个新的 @media 查询以根据需要将导航栏元素放下，您所要做的就是重置前者以适应具有所需放置宽度的新查询。以此为例：

CSS 

/** Modified Responsive CSS **/

@media (max-width: 979px) {
    .btn-navbar {
        display: none;
    }
    .navbar .nav-collapse {
        clear: none;
    }

    .nav-collapse {
        height: auto;
        overflow: auto;
    }

    .navbar .nav {
        float: left;
        margin: 0 10px 0 0;
    }

    .navbar .brand {
        margin-left: -20px;
        padding: 8px 20px 12px;
    }

    .navbar .dropdown-menu:before, .navbar .dropdown-menu:after {
        display: block;
    }

    .navbar .nav > li > a, .navbar .dropdown-menu a {
        border-radius: 0;
        color: #999999;
        font-weight: normal;
        padding: 10px 10px 11px;
    }

    .navbar .nav > li {
        float: left;
    }

    .navbar .dropdown-menu {
        background-clip: padding-box;
        background-color: #FFFFFF;
        border-color: rgba(0, 0, 0, 0.2);
        border-radius: 0 0 5px 5px;
        border-style: solid;
        border-width: 1px;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        display: none;
        float: left;
        left: 0;
        list-style: none outside none;
        margin: 0;
        min-width: 160px;
        padding: 4px 0;
        position: absolute;
        top: 100%;
        z-index: 1000;
    }

    .navbar-form, .navbar-search {
        border:none;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
        float: left;
        margin-bottom: 0;
        margin-top:6px;
        padding: 9px 15px;
    }

    .navbar .nav.pull-right {
        float: right;
        margin-left: auto;
    }
}

@media (max-width: 550px) {
    .btn-navbar {
        display: block;
    }
    .navbar .nav-collapse {
        clear: left;
    }

    .nav-collapse {
        height: 0;
        overflow: hidden;
    }

    .navbar .nav {
        float: none;
        margin: 0 0 9px;
    }

    .navbar .brand {
        margin: 0 0 0 -5px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .navbar .dropdown-menu:before, .navbar .dropdown-menu:after {
        display: none;
    }

    .navbar .nav > li > a, .navbar .dropdown-menu a {
        border-radius: 3px 3px 3px 3px;
        color: #999999;
        font-weight: bold;
        padding: 6px 15px;
    }

    .navbar .nav > li {
        float: none;
    }

    .navbar .dropdown-menu {
        background-color: transparent;
        border: medium none;
        border-radius: 0 0 0 0;
        box-shadow: none;
        display: block;
        float: none;
        left: auto;
        margin: 0 15px;
        max-width: none;
        padding: 0;
        position: static;
        top: auto;
    }

    .navbar-form, .navbar-search {
        border-bottom: 1px solid #222222;
        border-top: 1px solid #222222;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
        float: none;
        margin: 9px 0;
        padding: 9px 15px;
    }

    .navbar .nav.pull-right {
        float: none;
        margin-left: 0;
    }

}

在以下代码中，您可以看到我如何包含处理 979px 标记之前的放置的原始 @media 查询和支持您所需的 550px 放置点的新查询。我直接从引导响应 css 修改了原始查询，以重置应用于导航栏元素的特定查询的所有样式，并将它们移植到带有您需要的放置点的新查询中。通过这种方式，我们可以将所有样式从原始查询转换为新查询，而不会在引导响应样式表中乱七八糟，这样默认值仍将应用于文档中的其他元素。

这是一个简短的演示，其中媒体查询设置为根据需要放置在 550px：http://jsfiddle.net/wU8MW/

注意：我将上述修改后的 @media 查询放在 css 框架下方，因为新修改的 css 应该比响应 css 首先加载。

谢谢你的详细回答。它似乎确实有效 - 我仍在试图弄清楚如何。如果我理解正确，您 (1) 克隆了原始 @media (max-width: 979px) 查询以创建新的 @media (max-width: 550px) 查询。然后 (2) 您手动编写了一个新的 979px 查询来覆盖主 bootstrap-responsive.css 中 979px 查询的效果？您的 CSS 中的标签序列似乎不遵循 bootstrap-responsive.css 中的序列，因此我很难比较它们以了解您所做的事情。
@MarkBerry您走在正确的轨道上。我编写的 @media (max-width: 550px) 查询不遵循最初的 @media (max-width: 979px) 查询语法，因为我所做的只是一个快速示例，通过 firebug 和复制/粘贴手动覆盖它，对此很懒惰，但正确的做法是正如你在第二点中提到的。
在可维护性方面，这是一个艰难的决定。恐怕这种广泛的覆盖在提供绝对控制的同时，将意味着在每次 Bootstrap 更新后进行大量手动检查，而不是根据@Duopixel 的建议直接更新一两个源代码行。我使用 Bootstrap 的部分原因是我不是 CSS 专家，所以我想我现在会使用更简单的解决方案。
t
trisweb

bootstrap-sass 将在下一版本 (2.2.1.0) 中支持变量 $navbarCollapseWidth。一旦该版本上线，您就可以对其进行更新以完全按照您的意愿行事！

请你解释一下你把这个变量放在哪里？
在任何 Bootstrap 导入之前，例如 @import "bootstrap";
C
Community

自 2013 年 8 月起，可在 http://getbootstrap.com/customize/ 找到 Bootstrap 3“自定义和下载”页面

对于 Bootstrap 3，相关变量是 @grid-float-breakpoint。

以下 Stack Overflow 页面包含更多详细信息：Bootstrap 3 Navbar Collapse

K
KyleMit

我怀疑（并希望）这将很快以官方方式实施。与此同时，我只是在做一个简单的 css hack，在下拉按钮上使用 visible-phone，在我放置在导航栏中的第二组按钮上使用 visible-tablet。所以在它看起来像这样之前： 

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a href="<%= root_url %>" class="brand brandtag"></a>
      <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">
          <li>Navigation 1</li>
          <li>Navigation 2</li>
          <li>Navigation 3</li>
        </ul>
      </div>
    </div>
  </div>
</div>

现在它看起来像： 

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a href="<%= root_url %>" class="brand brandtag"></a>
      <a class="btn btn-navbar visible-phone" 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="visible-tablet">
        <ul class="nav">
          <li>Navigation 1</li>
          <li>Navigation 2</li>
          <li>Navigation 3</li>
        </ul>
      </div>
      <div class="nav-collapse">
        <ul class="nav">
          <li>Navigation 1</li>
          <li>Navigation 2</li>
          <li>Navigation 3</li>
        </ul>
      </div>
    </div>
  </div>
</div>

请注意，元素的顺序很重要，否则您可能会遇到元素进入下一行的问题

m
mae

我创建了一个单独的 SCSS 文件，其中列出了引导程序需要的所有部分，这样我就可以根据我们网站的需要打开和关闭部分。这样，我可以轻松地覆盖断点变量。这是我得到的： 

// Core variables and mixins
$grid-float-breakpoint: 991px;
@import "bootstrap/variables";
@import "bootstrap/mixins";

// Reset
@import "bootstrap/normalize";
//@import "bootstrap/print";

// Core CSS
@import "bootstrap/scaffolding";
@import "bootstrap/type";
//@import "bootstrap/code";
@import "bootstrap/grid";
@import "bootstrap/tables";
@import "bootstrap/forms";
@import "bootstrap/buttons";

// Components
@import "bootstrap/component-animations";
@import "bootstrap/glyphicons";
@import "bootstrap/dropdowns";
//@import "bootstrap/button-groups";
//@import "bootstrap/input-groups";
@import "bootstrap/navs";
@import "bootstrap/navbar";
@import "bootstrap/breadcrumbs";
@import "bootstrap/pagination";
@import "bootstrap/pager";
@import "bootstrap/labels";
@import "bootstrap/badges";
//@import "bootstrap/jumbotron";
//@import "bootstrap/thumbnails";
@import "bootstrap/alerts";
//@import "bootstrap/progress-bars";
//@import "bootstrap/media";
//@import "bootstrap/list-group";
@import "bootstrap/panels";
//@import "bootstrap/wells";
@import "bootstrap/close";

// Components w/ JavaScript
@import "bootstrap/modals";
@import "bootstrap/tooltip";
//@import "bootstrap/popovers";
//@import "bootstrap/carousel";

// Utility classes
@import "bootstrap/utilities";
@import "bootstrap/responsive-utilities";
K
KyleMit

这是我的代码（所有其他解决方案在导航栏下拉时显示时髦的滚动条，所以我编辑了代码，所以它没有）。我无法发布其他答案，所以我会在这里为其他人找到。我正在使用 Rails 和 Bootstrap 3.0 来做到这一点。

资产/样式表/框架和覆盖粘贴此：（将最大宽度调整为任何值以实现您的目标。） 

@media (max-width: 2500px) {
.navbar-header {
    float: none;
}
.navbar-toggle {
    display: block;
}
.navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
    display: none!important;
}
.navbar-collapse.collapse.in {
    display: block!important;
}
.navbar-nav {
    float: none!important;
}
.navbar-nav>li {
    float: none;
}
.navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
}
J
JasonS

引导程序 3.x

使用 LESS，您可以更改 @screen-small 的值以定位您的最小尺寸

示例：@screen-small: 600px;

一旦宽度小于 600 像素，我就使用它来切换到“微型设备”模式

你知道如何用 SCSS 做到这一点吗？
对不起，我没有。我认为引导程序是使用 LESS 开发的，因此您可能必须以 .css 方式进行操作（请参阅上面的引导程序 2 答案）
c
coding addicted

引导程序 3.x

使用 SASS，您可以更改 $screen-sm 的值以针对您的最小尺寸

例如：$screen-sm: 600px;

您需要将此值放在您的 application.scss 文件中 @import "bootstrap" 之前； 

$screen-sm:600px;
@import "bootstrap";

以“@”开头的较少变量只是将它们更改为“$”以在导入之前覆盖它们。

Here is the list of variables.

这破坏了功能
j
jinhr

引导程序 4.x

在 Bootstrap 4.x 中更改折叠阈值很容易。有6种情况：

始终展开，永不折叠（即断点为 0px）：

断点为 sm (576px)： 断点是 md (768px): 断点是 lg (992px): 断点是 xl (1200px):
J
Jason Capriotti

这是一个很好的例子，说明您可以使用 LESS 版本的 Bootstrap CSS 文件。如何做到这一点如下。

更好的做法是将其作为拉取请求提交到 Github 上，这样每个人都可以受益，并且您的“自定义代码”有望成为 Bootstrap 向前发展的一部分。

向 variables.less 添加一个变量，指定何时折叠导航栏。类似于：@navCollapseWidth: 979px

然后修改 responsive-navbar.less... 顶部将 @media (max-width: 979px) 更改为 @media (max-width: @navCollapseWidth) 在底部将 @media (min-width: 980px) 更改为 @media (最大宽度：@navCollapseWidth - 1)

将@media（最大宽度：979px）更改为@media（最大宽度：@navCollapseWidth）

在底部将 @media (min-width: 980px) 更改为 @media (max-width: @navCollapseWidth - 1)

当然...您必须使用 suggested methods 之一编译 LESS。

显然，Bootstrap 2.0.4 改变了响应式文件的文件结构。请参阅 bootstrap-sass 作者 @Thomas McDonald 的 comment。尚未对此进行深入研究，但即使使用 SASS 版本，它也可能允许更轻松地修改阈值。
对不起;我完全错过了问题中的 Sass 评论......我只是专注于基于类别的 Bootstrap。但是，文件结构看起来与我在 Bootstrap 中看到的相同......无论哪种方式，我都会更新我的答案以响应问题。
不用担心。我完全同意，最好的解决方案是让 bootstrap 本地提供一个变量或一系列变量来控制导航栏折叠阈值。我对 CSS、LESS 或 SASS 或媒体查询的经验不足，无法编写该增强功能；）。
K
KyleMit

通过向主可折叠导航中的项目添加可见电话分类块和隐藏电话分类，进一步利用 tyler 的技巧，您可以“拉出”一两个折叠项目以显示在电话导航栏中。 

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a href="<%= root_url %>" class="brand brandtag"></a>
      <a class="btn btn-navbar visible-phone" 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="visible-tablet">
        <ul class="nav">
          <li>Navigation 1</li>
          <li>Navigation 2</li>
          <li>Navigation 3</li>
        </ul>
      </div>
      <div class="visible-phone">
        <ul class="nav">
          <li>Navigation 1</li>
        </ul>
      </div>
      <div class="nav-collapse">
        <ul class="nav">
          <li class="hidden-phone">Navigation 1</li>
          <li>Navigation 2</li>
          <li>Navigation 3</li>
        </ul>
      </div>
    </div>
  </div>
</div>
G
Ganpat Kakar

只需在您的自定义 style.css 文件中写下此代码即可 

@media (min-width: 768px) and (max-width: 991px) {
        .navbar-collapse.collapse {
            display: none !important;
        }
        .navbar-collapse.collapse.in {
            display: block !important;
        }
        .navbar-header .collapse, .navbar-toggle {
            display:block !important;
        }
        .navbar-header {
            float:none;
        }
        .navbar-nav {
            float: none !important;
            margin: 0px;
        }
        .navbar-nav {
            margin: 7.5px -15px;
        }
        .nav > li {
            position: relative;
            display: block;
        }
        .navbar-nav > li {
            float: none !important;
        }
        .nav > li > a {
            position: relative;
            display: block;
            padding: 10px 15px;
        }
        .navbar-collapse {
            padding-right: 15px;
            padding-left: 15px;
            overflow-x: visible;
            border-top: 1px solid transparent;
            box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.1) inset;
        }
        .nav {
            padding-left: 0px;
            margin-bottom: 0px;
            list-style: outside none none;
        }
    }

关注公众号,不定期副业成功案例分享
关注公众号

不定期副业成功案例分享

想领先一步获取最新的外包任务吗？

立即订阅

HuntsBot(狩猎机器人)，一站式外包任务、远程工作、产品创意分享与订阅平台，支持钉钉、飞书、企业微信、邮箱、Telegram机器人订阅。平台会以及时、稳定、可靠的技术把外包任务需求、远程工作机会、产品创意等推送给每一位订阅的用户。

简体中文 English

平台

支持

友情链接

联系我们

在使用过程中有任何问题或建议，可以通过以下方式联系我们：

微信公众号: 火星来客

Email: huntsbot@xinbeitime.com

Copyright© 2022-2023 www.huntsbot.com 浙ICP备2022000860号-4 All Rights Reserved.