修改Bootstrap @media

Question

我有这个小提琴 ，使用引导程序显示菜单。 调整浏览器的大小时，我希望菜单折叠起来，然后右侧的链接位于左侧品牌下方。 我想知道的是我应该修改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

您还可以从他们的网站生成自定义引导CSS文件，并为screen-sm断点设置新值。 这样可以按照您希望的屏幕宽度（而不是默认的768px）调整所有内容的大小。

Answer 2

您应该不考虑Bootstrap规则，而只是在另一个样式表中创建适合您需要的其他规则，但是请确保在引导程序之后，此附加CSS文件被称为，因此可以将其覆盖。

Answer 3

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