修改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断点设置新值。这将负责调整所需屏幕宽度的所有内容，而不是默认的768px。

Answer 2

您应该单独保留Bootstrap规则，并在另一个样式表中创建适合您需要的其他规则，但请确保在引导程序之后调用此附加CSS文件，以便可以覆盖它们。

Answer 3

从引导程序中复制要编辑的部分，然后将其粘贴+编辑到新的css文件中，min-width为825px。编辑bootstrap本身会变得混乱，最好用新的css覆盖它。