Bootstrap 3 - 刪除md和lg之間的斷點

Question

我正在使用Bootstrap 3並嘗試刪除/排除中型和大型設備之間的斷點。我有一個現有的網站，已經優化到970px，看起來不錯。我正在嘗試去除md> lg斷點，以便即使在大型寬屏桌面上，最大體寬也是970像素，仍然居中。

任何人都知道是否有一個quickfix解決方案呢？

任何建議，將不勝感激

Decbrad

Answer 1

如果你重寫引導斷點（並使用適當的容器），在引導CSS文件中添加此下方引導斷點媒體查詢應該工作您。使用較少

@media (min-width: @screen-lg) { 
    .container { 
     width: 970px; 
    } 
} 

或者，你可以簡單地覆蓋引導容器在自己的CSS

如果（只是確保你bootstrap.css之後加載它）

@media (min-width: 970px) and (max-width: 2500px) { 
    .container { 
     width: 970px; 
    } 
} 

或者您可以在1240行左右的bootstrap.css文件中找到媒體查詢，並在此處簡單更改

@media (min-width: 1200px) { 
    .container { 
    width: 1170px; /* change 1170 to 970 */ 
    } 
} 

Answer 2

的更低的方式是好的，但這樣一個更爲靈活和可靠：

@media (min-width: @screen-sm) { .container { width:@screen-md; } } 

因爲白手起家的默認值@屏幕-MD的寬度爲992px。 現在，您只需爲小設備（智能手機）和任何其他更大的設備設置斷點。他們都將獲得相同的佈局

Answer 3

您可以在容器中設置一個最大寬度：

.container-fluid, 
.container { 
    // Disable large-desktop breakpoint. 
    max-width: $container-md; 
} 

無需媒體查詢或任何東西。

該值通常爲970px，除非您更改了$grid-gutter-width。對於LESS，請將$的變量替換爲@。對於常規的CSS，用硬編碼的像素大小替換該變量。