Disable ONE z responsywnych układów na Twitterze Bootstrap

Question

Chciałbym wyłączyć jeden z układów Responsive. Niezależnie od drugiego najmniejszego układu, zanim przejdzie do widoku mobilnego.

Answer 1

Jeśli kompilujesz z plików LESS, jest to całkiem proste. Otwórz responsive.less i pod "MEDIA QUERIES" skomentuj lub usuń deklarację @import dla dowolnego układu, którego nie chcesz. Na przykład, jeśli nie chce tabletek zwykłych komputerów stacjonarnych jeden kod wyglądałby następująco:

// 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"; 

Teraz już skompilować bootstrap.less i powinno być zrobione.

Jeśli, z drugiej strony, nie kompilujesz się od bootstrap.less i korzystasz bezpośrednio z bootstrap-responsive.css, możesz wyszukać zapytanie o media dla określonego urządzenia i usunąć/skomentować tę sekcję.

Na przykład, usuwanie tabletki portret należałoby wyglądać (w 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 */ 

ustalenia, które @media zapytanie odpowiada które urządzenie szerokość przyjrzeć http://twitter.github.com/bootstrap/scaffolding.html#responsive; Zapytania o media są tam podawane wraz z rozmiarami urządzeń, którym odpowiadają.

Answer 2

• zadzwoń do swojego css po wywołaniu bootstrap.
• W twoim css skopiuj wiersz, span css z układu, który chcesz i umieść go w swoim css.
• zmiana zapytania mediów, aby coś takiego (Maksymalna szerokość jest szerokością chcesz trzymać się):

@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

Jeśli nie kompilacji LESS, najlepszym sposobem znalazłem to wchodzenie w bootstrap.css i komentowanie rozmiaru, który nie powinien być aktywny. CSS jest dobrze zorganizowany, a wyłączenie jednego z rozmiarów nie ma wpływu na nic innego.

(Oczywiście, trzeba być ostrożnym, nie włączyć je podczas aktualizacji startowej.)

Answer 4

Jako ulepszenie spinningarrow „s sposób to zrobić przy użyciu mniej znaczy ustawić @gridColumnWidth768 i @gridGutterWidth768 dopasować @gridColumnWidth i @gridGutterWidth tak:

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

z reguły staram zostawić w spokoju pliki dostawców i edytować je tylko w ostateczności. To pozwala mi rozwiązać ten problem bez konieczności edycji podstawowych plików bootstrap.