禁用其中一個Twitter Bootstrap響應式佈局

Question

我想禁用其中一個響應式佈局。無論在切換到移動視圖之前第二小的佈局是什麼。

Answer 1

如果您從LESS文件編譯，這很容易。打開responsive.less，在「MEDIA QUERIES」下注釋掉或取消@import聲明，無論您想要哪種佈局。例如，如果你不想在片中經常臺式機之一，代碼應該是這樣的：

// MEDIA QUERIES 
// ------------------ 

// Phones to portrait tablets and narrow desktops 
@import "responsive-767px-max.less"; 

// Tablets to regular desktops 
// @import "responsive-768px-979px.less"; // commented this out because I don't like it 

// Large desktops 
@import "responsive-1200px-min.less"; 

後，只是重新編譯bootstrap.less，你應該做的。

另一方面，如果您沒有從bootstrap.less編譯並直接使用bootstrap-responsive.css，則可以搜索特定設備的媒體查詢並刪除/註釋掉該部分。

例如，移除所述肖像片劑一個看起來像（在bootstrap-responsive.css）：

/* some CSS code above this */ 

.hidden-desktop { 
    display: none !important; 
} 

/* comment out the following rule entirely in order to disable it */ 
/* 
@media (max-width: 767px) { 
    .visible-phone { 
    display: inherit !important; 
    } 
    .hidden-phone { 
    display: none !important; 
    } 
    .hidden-desktop { 
    display: inherit !important; 
    } 
    .visible-desktop { 
    display: none !important; 
    } 
}*/ /* stop commenting out, we want everything below this */ 

@media (min-width: 768px) and (max-width: 979px) { 
    .visible-tablet { 
    display: inherit !important; 
    } 

/* More CSS code follows */ 

要找出@media查詢對應於器件寬度，看看http://twitter.github.com/bootstrap/scaffolding.html#responsive;媒體查詢以及它們對應的設備大小。

Answer 2

• 在引導程序調用之後調用您的css。
• 在你的css中拷貝行，span css形成你想要的佈局，並把它放到你的css中。
• 改變媒體查詢，像這樣（的最大寬度是你想堅持的寬度）：

@media (max-width: 1200px) { 
    .row { 
     margin-left: -30px; 
     *zoom: 1; 
    } 
    .row:before, 
    .row:after { 
     display: table; 
     content: ""; 
     line-height: 0; 
    } 
    .row:after { 
     clear: both; 
    } 
    [class*="span"] { 
     float: left; 
     margin-left: 30px; 
    } 
    .container, 
    .navbar-static-top .container, 
    .navbar-fixed-top .container, 
    .navbar-fixed-bottom .container { 
     width: 1170px; 
    } 
    .span12 { 
     width: 1170px; 
    } 
    .span11 { 
     width: 1070px; 
    } 
    .span10 { 
     width: 970px; 
    } 
    .span9 { 
     width: 870px; 
    } 
    .span8 { 
     width: 770px; 
    } 
    .span7 { 
     width: 670px; 
    } 
    .span6 { 
     width: 570px; 
    } 
    .span5 { 
     width: 470px; 
    } 
    .span4 { 
     width: 370px; 
    } 
    .span3 { 
     width: 270px; 
    } 
    .span2 { 
     width: 170px; 
    } 
    .span1 { 
     width: 70px; 
    } 
    .offset12 { 
     margin-left: 1230px; 
    } 
    .offset11 { 
     margin-left: 1130px; 
    } 
    .offset10 { 
     margin-left: 1030px; 
    } 
    .offset9 { 
     margin-left: 930px; 
    } 
    .offset8 { 
     margin-left: 830px; 
    } 
    .offset7 { 
     margin-left: 730px; 
    } 
    .offset6 { 
     margin-left: 630px; 
    } 
    .offset5 { 
     margin-left: 530px; 
    } 
    .offset4 { 
     margin-left: 430px; 
    } 
    .offset3 { 
     margin-left: 330px; 
    } 
    .offset2 { 
     margin-left: 230px; 
    } 
    .offset1 { 
     margin-left: 130px; 
    } 
} 

Answer 3

如果沒有編制少，我已經找到了最好的方法是進入bootstrap.css並註釋掉你不想活動的大小。 CSS的組織很好，禁用其中一個尺寸似乎不會影響其他任何內容。

（當然，你要小心，你的更新引導時不會重新啓用它們。）

Answer 4

作爲改進spinningarrow的方式做到這一點使用較少被設置@gridColumnWidth768和時@gridGutterWidth768匹配@gridColumnWidth和@gridGutterWidth像這樣：

@gridColumnWidth768: @gridColumnWidth; 
@gridGutterWidth768: @gridGutterWidth; 

作爲一個規則，我想離開單獨的供應商文件，並只將其編輯作爲最後的手段。這使我無需編輯核心引導程序文件即可解決此問題。