html - 修改 Bootstrap @media

Question

我有这个Fiddle显示使用 Bootstrap 的菜单。调整浏览器大小时，我希望菜单在右侧链接低于左侧品牌之前折叠。我想知道的是我应该修改 bootstrap.css 中的@media 部分，还是有另一种方法可以在不更改默认 Bootstrap CSS 的情况下折叠我的菜单？如果我更改默认的媒体 bootstrap.css 文件，我以后会不会自找麻烦？

Bootstrap.css 中的部分:

@media (min-width: 768px) {  /* If I change this to 825, I achieve what I 
                                want. Is that the best way, or am I asking
                                for trouble later on? */
  .navbar-collapse {
    width: auto;
    border-top: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  .navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
  }
  .navbar-collapse.in {
    overflow-y: visible;
  }
  .navbar-fixed-top .navbar-collapse,
  .navbar-static-top .navbar-collapse,
  .navbar-fixed-bottom .navbar-collapse {
    padding-right: 0;
    padding-left: 0;
  }
}

Answer 1

你也可以 generate a custom bootstrap css file from their website并为 screen-sm 断点设置一个新值。这将负责将所有内容调整为您想要的屏幕宽度，而不是默认的 768 像素。