修改Bootstrap @media

Question

我有这个Fiddle，显示使用引导菜单。在调整浏览器大小时，我希望菜单在右侧链接落在左侧品牌下方之前折叠。我想知道的是我应该修改bootstrap.css中的@media部分，还是有另一种方法来折叠菜单而不更改默认引导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

你应该独自离开的引导规则，只是创造适合在另一个样式表您的需要额外的规则，但要确保这个额外的CSS文件名为Bootstrap之后一个，所以他们可以被覆盖。

Answer 3

从引导中复制要编辑的部分，然后将其粘贴并编辑为一个新的css文件，其中min-width为825px。编辑bootstrap本身变得麻烦，最好用新的css覆盖它。