不使用LESS更改引导程序导航栏折叠断点

时间：2013-11-07 03:41:03

标签： css twitter-bootstrap responsive-design navbar collapse

目前，当浏览器宽度降至768px以下时，导航栏将更改为折叠模式。我想将此宽度更改为1000px，因此当浏览器低于1000px时，导航栏将更改为折叠模式。我想在不使用LESS的情况下这样做，我使用手写笔不是很少。

我的问题与此问题相同：Bootstrap 3 Navbar Collapse

但是那些问题的所有答案都解释了如何通过改变LESS变量来做到这一点。我没有处理过LESS，我正在使用手写笔，所以我想知道如何使用手写笔或其他方法来完成。

谢谢！

19 个答案:

答案 0 :(得分：354)

2018更新

Bootstrap 4

使用navbar-expand-*类在Bootstrap 4中更改导航栏断点更容易：

<nav class="navbar fixed-top navbar-expand-sm">..</nav>

  • navbar-expand-sm = xs屏幕上的移动菜单＆lt; 576px
  • navbar-expand-md = sm屏幕上的移动菜单＆lt; 768px
  • navbar-expand-lg = md屏幕上的移动菜单＆lt; 992px
  • navbar-expand-xl = lg屏幕上的移动菜单＆lt; 1200px
  • navbar-expand =从不使用移动菜单
  • (no expand class) =始终使用移动设备菜单

如果您排除navbar-expand-*，移动菜单将以all宽度使用。这是所有6个导航栏状态的演示：Bootstrap 4 Navbar Example

您还可以通过添加一个CSS来使用自定义断点（??? px）。例如，这里是1300px .. 

@media (min-width: 1300px){
    .navbar-expand-custom {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    .navbar-expand-custom .navbar-nav {
        flex-direction: row;
    }
    .navbar-expand-custom .navbar-nav .nav-link {
        padding-right: .5rem;
        padding-left: .5rem;
    }
    .navbar-expand-custom .navbar-collapse {
        display: flex!important;
    }
    .navbar-expand-custom .navbar-toggler {
        display: none;
    }
}

Bootstrap 4 Custom Navbar Breakpoint
Bootstrap 4 Navbar Breakpoint Examples

<小时/> Bootstrap 3

对于Bootstrap 3.3.x，这里是工作 CSS来覆盖导航栏断点。将991px更改为您希望导航条折叠的点的像素尺寸... 

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

991px的工作示例：http://www.bootply.com/j7XJuaE5v6
1200px的工作示例：https://www.codeply.com/go/VsYaOLzfb4（带搜索表单）

注意：上述内容适用于 over 768px 的任何内容。如果您需要将其更改为 小于768px example of less than 768px is here。

答案 1 :(得分：48)

你必须为此编写一个特定的媒体查询，从您的问题，在768px以下，导航栏将崩溃，因此将其应用于768px以上且1000px以下，就像那样：

@media (min-width: 768px) and (max-width: 1000px) {
   .collapse {
       display: none !important;
   }
}

这将隐藏导航栏折叠，直到默认出现引导程序单元。当崩溃类翻转时，导航栏内部的内部资产将自动隐藏，就像你必须按照你想要的设计设置你的css一样。

答案 2 :(得分：44)

在 bootstrap3 中，将此变量 @ grid-float-breakpoint 更改为您需要的变量。默认值为768px

答案 3 :(得分：23)

最后通过在http://getbootstrap.com/customize/摆弄'@ grid-float-breakpoint'来解决如何更改折叠宽度的问题。

转到bootstrap.css（也是最小版本）中的第2923行并将@media screen and (min-width: 768px) {更改为@media screen and (min-width: 1000px) {

所以代码最终会成为：

@media screen and (min-width: 1000px) {
  .navbar-brand {
    float: left;
    margin-right: 5px;
    margin-left: -15px;
  }
  .navbar-nav {
    float: left;
    margin-top: 0;
    margin-bottom: 0;
  }
  .navbar-nav > li {
    float: left;
  }
  .navbar-nav > li > a {
    border-radius: 0;
  }
  .navbar-nav.pull-right {
    float: right;
    width: auto;
  }
  .navbar-toggle {
    position: relative;
    top: auto;
    left: auto;
    display: none;
  }
  .nav-collapse.collapse {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }
}

答案 4 :(得分：12)

我刚刚使用以下CSS代码成功完成了这项工作。

@media(max-width:1000px)  {

    .navbar-collapse.collapse {
        display: none !important;
    }

    .navbar-collapse {
        overflow-x: visible !important;
    }

    .navbar-collapse.in {
      overflow-y: auto !important;
    }

    .collapse.in {
      display: block !important;
    }

}

答案 5 :(得分：12)

在Bootstrap 3 .LESS 源代码中，variables.less中定义了一个名为@grid-float-breakpoint的变量，其中包含以下有用的注释：

//**Point at which the navbar becomes uncollapsed
@grid-float-breakpoint: @screen-sm-min;

匹配的@grid-float-breakpoint-max值设置为减去1px：

//**Point at which the navbar begins collapsing
@grid-float-breakpoint-max: (@grid-float-breakpoint-max - 1);

解决方案：

所以只需将@grid-float-breakpoint值设置为1000px，然后将bootstrap.less重建为bootstrap.css：

e.g。

@grid-float-breakpoint: 1000px;

答案 6 :(得分：11)

更改引导变量的Sass方法实际上记录在bootstrap-sass github页面上。

在@import bootstrap之前重新定义变量：

$grid-float-breakpoint: 1000px;

@import 'bootstrap';

答案 7 :(得分：7)

除了@Skely回答，要在导航栏工作中创建下拉菜单，还要添加要覆盖的类。最终代码如下：

    @media (min-width: 768px) and (max-width: 991px) {
        .navbar-nav .open .dropdown-menu {
            position: static;
            float: none;
            width: auto;
            margin-top: 0;
            background-color: transparent;
            border: 0;
            -webkit-box-shadow: none;
            box-shadow: none;
        }
        .navbar-nav .open .dropdown-menu > li > a {
            line-height: 20px;
        }
        .navbar-nav .open .dropdown-menu > li > a,
        .navbar-nav .open .dropdown-menu .dropdown-header {
            padding: 5px 15px 5px 25px;
        }
        .dropdown-menu > li > a {
            display: block;
            padding: 3px 20px;
            clear: both;
            font-weight: normal;
            line-height: 1.42857143;
            color: #333;
            white-space: nowrap;
        }
        .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-nav {
            float: none!important;
            /*margin: 7.5px -15px;*/
            margin: 7.5px 50px 7.5px -15px
        }
        .navbar-nav>li {
            float: none;
        }
        .navbar-nav>li>a {
            padding-top: 10px;
            padding-bottom: 10px;
        }
        .navbar-text {
            float: none;
            margin: 15px 0;
        }
        /* since 3.1.0 */
        .navbar-collapse.collapse.in { 
            display: block!important;
        }
        .collapsing {
            overflow: hidden!important;
        }
    }

demo code

答案 8 :(得分：4)

在bootstrap v4中，导航可以使用不同的css类迟早折叠

例如：

  • 导航栏-可切换-SM
  • 导航栏-可切换-MD
  • 导航栏-可切换-LG

使用导航按钮：

  • 隐藏-SM-向上
  • 隐藏-MD-向上
  • 隐藏LG-向上

答案 9 :(得分：3)

对于Bootstrap 3.3，这是您需要的唯一代码：

@media (min-width: 768px) and (max-width: 1000px) {
   .navbar-collapse.collapse {
       display: none !important;
   }
   .navbar-toggle{
        display: block !important;
   }
   .navbar-header{
        float: none;
   }
}

答案 10 :(得分：3)

Navbars可以利用.navbar-toggler，.navbar-collapse和.navbar-expand {-sm | -md | -lg | -xl}类在内容折叠到按钮后时进行更改。与其他实用程序结合使用，您可以轻松选择何时显示或隐藏特定元素。

对于永不折叠的导航栏，请在导航栏上添加.navbar-expand类。对于始终折叠的导航栏，请不要添加任何.navbar-expand类。

例如：

<nav class="navbar navbar-expand-lg"></nav>

大屏幕显示移动菜单。

参考： https://getbootstrap.com/docs/4.0/components/navbar/

答案 11 :(得分：2)

您最好的选择是使用您使用的CSS处理器的端口。

我是SASS的忠实粉丝所以我目前使用https://github.com/thomas-mcdonald/bootstrap-sass

看起来这里有针对Stylus的分支：https://github.com/Acquisio/bootstrap-stylus

否则，搜索＆amp;在css版本中，替换是你最好的朋友...

答案 12 :(得分：2)

这对我来说起了Bootstrap3 

@media (min-width: 768px) {
    .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;
          margin: 7.5px -15px;
      }
      .navbar-nav>li {
          float: none;
      }
      .navbar-nav>li>a {
          padding-top: 10px;
          padding-bottom: 10px;
      }
}

花了一段时间才弄明白这两个：

.navbar-collapse.collapse {
   display: none!important;
}
.navbar-collapse.collapse.in {
   display: block!important;
}

答案 13 :(得分：1)

嗨，我认为你可以像这样使用CSS 你可以改变断点引导菜单

    @media (max-width: 1200px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }

    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important; 
    }
    .navbar-nav>li {
        float: none;
    } 
    .collapse.in{
        display:block !important;
    }
   .navbar-nav .open .dropdown-menu {
       position: static;
       float: none;
       width: auto;
       margin-top: 0;
       background-color: transparent;
       border: 0;
       -webkit-box-shadow: none;
       box-shadow: none;
    }
}

答案 14 :(得分：0)

这就是我的诀窍：

@media only screen and (min-width:769px) and (max-width:1000px){
.navbar-collapse.collapse {
    display: none !important;
}
.navbar-collapse.collapse.in {
    display: block !important;
}
.navbar-header .collapse, .navbar-toggle {
    display:block !important;
}

答案 15 :(得分：0)

在bootstrap 4中，如果你想在navbar-expand- *时进行覆盖，展开和折叠并显示和隐藏汉堡包（navbar-toggler），你必须在bootstrap.css中找到该样式/定义，并重新定义它在你自己的customstyle.css中（如果你是如此倾向于直接在bootstrap.css中）。

EG。我希望navbar-expand-lg折叠并显示navbar-toggler 在950px。在bootstrap.css中我找到：

@media (max-width: 991.98px) {
  .navbar-expand-lg > .container,
  .navbar-expand-lg > .container-fluid {
    padding-right: 0;
    padding-left: 0;
  }
}

低于那...... 

@media (min-width:992px) { 
    ... lots of styling ...
}

我复制了两个@media查询并将它们粘贴在我的style.css中，然后根据我的需要修改了大小。我的情况我希望它以950px的速度崩溃。 @media查询必须是不同的大小（我猜），所以我将容器max-width设置为949.98px并将950px用于其他@media查询，因此以下代码被附加到我的style.css中。这不容易解决我在Stackoverflow和其他地方发现的扭曲解决方案。希望这会有所帮助。

@media (max-width: 949.98px) {
    .navbar-expand-lg > .container,
    .navbar-expand-lg > .container-fluid {
        padding-right: 0;
        padding-left: 0;
    }
}

@media (min-width: 950px) {
    .navbar-expand-lg {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }
    .navbar-expand-lg .navbar-nav {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
    }
    .navbar-expand-lg .navbar-nav .dropdown-menu {
        position: absolute;
    }
    .navbar-expand-lg .navbar-nav .dropdown-menu-right {
        right: 0;
        left: auto;
    }
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
    .navbar-expand-lg > .container,
    .navbar-expand-lg > .container-fluid {
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }
    .navbar-expand-lg .navbar-collapse {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-preferred-size: auto;
        flex-basis: auto;
    }
    .navbar-expand-lg .navbar-toggler {
        display: none;
    }
    .navbar-expand-lg .dropup .dropdown-menu {
        top: auto;
        bottom: 100%;
    }
}

答案 16 :(得分：0)

这里我的工作代码在React with Bootstrap中使用

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin="anonymous">
<style>
  @media (min-width: 768px) and (max-width: 1000px) {
   .navbar-collapse.collapse {
       display: none !important;
   }
   .navbar-toggle{
        display: block !important;
   }
   .navbar-header{
        float: none;
   }
}
  </style>

答案 17 :(得分：0)

Bootstrap 4.4现在支持它

navbar-expand-sm

答案 18 :(得分：0)

这是我的工作代码。 （下拉导航栏链接也有效）

@media (max-width: 1199px) {
  .navbar-nav {
    margin: 7.5px -15px;
 }
  .ul-links {
    display: block;
  }
  .navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 20px;
  }  
  .navbar-header {
      float: none;
  }
  .navbar-left,.navbar-right {
      float: none !important;
  }
  .navbar-toggle {
      display: block;
  }

  .navbar-collapse.collapse {
      display: none!important;
      max-height: none;
  }
  .navbar-nav {
      float: none!important; 
  }
  .navbar-nav>li {
      float: none;
  } 
  .collapse.in{
      display:block !important;
  }
 .navbar-nav .open .dropdown-menu {
     position: static;
     float: none;
     width: auto;
     margin-top: 0;
     background-color: transparent;
     border: 0;
     -webkit-box-shadow: none;
     box-shadow: none;
  }
}
相关问题
最新问题