Question

已成功实现下面的stackoverflow帖子，介绍如何更改bootstrap navbars的断点：

Bootstrap 3 Navbar Collapse

但是......我试图弄清楚如何在一个页面上更改一个特定导航栏的折叠行为，该页面上还有几个＆＃34;标准＆＃34;导航栏。并且只想使用CSS，而不是使用LESS或SASS。

我曾尝试将某些导航栏类复制/重命名为自定义CSS，但到目前为止还没有有用的结果。不过，我的预感是这种方法应该有效。希望有一些指针，其中包括必要的类，或者可能是另一种方法......

之前有人问过类似的问题，但未回答：

Bootstrap 3 Navbar Collapse - change breakpoint for a specific navbar

在发布上述问题后，我可能偶然发现了一些事情。它似乎有效，但肯定需要进一步调查：

不确定所有的机械细节，但不会在口中看到礼物马。

从上面的第一个链接，我修改了以下类和媒体查询，使该帖子中的其他类保持不变（但仍然使用它们）：

    @media (max-width: 1000px) {
      .navbar-header2 {
          float: none;
      }
      .navbar-toggle2 {
          display: block;
      }
      .navbar-left2,.navbar-right2 {
          float: none !important;
      }
      .navbar-collapse2 {
          border-top: 1px solid transparent;
          box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
      }
      .navbar-collapse2.collapse {
          display: none!important;
      }
      .navbar-nav2 {
          float: none!important;
          margin-top: 7.5px;
      }
      .navbar-nav2>li {
          float: none;
      }
      .navbar-nav2>li>a {
          padding-top: 10px;
          padding-bottom: 10px;
      }
    }

我最初的错误之一就是将该样式代码放在错误的位置，所以买家要小心。

然后：

<div class="navbar-header navbar-header2">
    <button type="button" class="navbar-toggle navbar-toggle2" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Products</a>
</div>
<div class="collapse navbar-collapse collapse2 navbar-collapse2" id="myNavbar">
    <ul class="nav nav-pills nav-stacked">
        <li>stuff goes here</li>
        <li>stuff goes here</li>
    </ul>
</div>

将根据未来情况确定发布额外票据。一个好奇的笔记，三个＆＃34; .navbar-nav2＆＃34;上面的样式代码中的类似乎是必需的。将它们全部留作＆＃34; .navbar-nav＆＃34;至少炸掉了我的一个标准＆＃34;导航栏。

任何想法，评论和更正都表示赞赏。我很清楚它无疑需要更多的工作。我所做的一些改变可能完全没有必要，或者更糟。但就目前而言，它的进步！（我想。也许。）

使用css临时更改bootstrap 3 navbar collapse breakpoint

0 个答案: