Disabilitare UNO dei layout reattivi di Bootstrap di Twitter

Question

Vorrei disabilitare uno dei layout Responsive. Qualunque sia il secondo layout più piccolo, prima di passare alla visualizzazione mobile.

Answer 1

Se si sta compilando dai file LESS, questo è abbastanza semplice. Aprire responsive.less e in "MEDIA QUERIES" commentare o rimuovere la dichiarazione @import per qualsiasi layout non desiderato. Ad esempio, se non si desidera che le Tavole ai desktop regolari uno, il codice sarebbe simile a questa:

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

Dopo di che basta ricompilare bootstrap.less e si dovrebbe essere fatto.

Se, d'altro canto, non si sta compilando da bootstrap.less e si utilizza direttamente bootstrap-responsive.css, è possibile cercare la query multimediale per il dispositivo specifico e rimuovere/commentare quella sezione.

Per esempio, la rimozione del tablet ritratto si potrebbe apparire come (in 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 */ 

per scoprire quale @media interrogazione corrisponde a quale larghezza del dispositivo, dare un'occhiata a http://twitter.github.com/bootstrap/scaffolding.html#responsive; le domande dei media vengono fornite insieme alle dimensioni dei dispositivi a cui corrispondono.

Answer 2

• chiama il tuo css dopo la chiamata di bootstrap.
• Nel tuo css copia la riga, spanda css dal layout che vuoi e mettilo nel tuo css.
• modificare la query media per qualcosa di simile (La larghezza massima è la larghezza che ti piace di attenersi a):

@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

Se non si sta compilando MENO, il modo migliore che ho trovato è andando in bootstrap.css e commentando la dimensione che non vuoi essere attiva. Il CSS è abbastanza ben organizzato e la disabilitazione di una delle dimensioni non sembra influenzare nient'altro.

(Naturalmente, bisogna stare attenti a non riattivare quando l'aggiornamento Bootstrap.)

Answer 4

Come un miglioramento spinningarrow 's modo per fare questo quando usando meno è quello di impostare la @gridColumnWidth768 e @gridGutterWidth768 per abbinare @gridColumnWidth e @gridGutterWidth in questo modo:

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

come regola generale, cerco di lasciare i file vendor da soli e solo modificarli come ultima risorsa. Questo mi consente di risolvere questo problema senza dover modificare i file core di bootstrap.