Html 修改Bootstrap@media

我有一个显示使用引导的菜单。调整浏览器大小时，我希望菜单在右边的链接落在左边的品牌之下之前折叠。我想知道的是，我应该修改bootstrap.css中的@media部分，还是有其他方法可以在不更改默认bootstrap css的情况下折叠菜单？如果我以后更改默认的media 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;
  }
}

---

您应该不使用引导规则，只需在另一个样式表中创建适合您需要的附加规则，但请确保在引导规则之后调用此附加CSS文件，以便可以覆盖它们。

您还可以为

屏幕sm

断点设置一个新值。这将按照您所需的屏幕宽度（而不是默认的768px）调整所有内容的大小。

从引导复制要编辑的部分，并将其粘贴并编辑到一个新的css文件中，最小宽度为825px。编辑引导本身会变得混乱，最好用新的css覆盖它

这正是我所需要的…特别是因为我还需要改变其他一些事情。我不知道你能做到这一点，尽管我仍然会坚持使用另一个样式表中的自定义查询。管理起来容易多了。