修改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覆蓋它。