Come disattivare completamente la funzione di risposta da Twitter Bootstrap 3?

Come posso disattivare la reattività in Bootstrap 3?Come disattivare completamente la funzione di risposta da Twitter Bootstrap 3?

Voglio solo sviluppare una versione desktop e quando la dimensione è diversa dovrebbe comunque apparire come la versione desktop.

Twitter.com fa questo. Se provi a ridimensionare, non succede nulla all'interfaccia utente mentre il mio sito sta riprogettando tutti gli elementi.

Esempio di come lo voglio: enter image description here

Comunque ora come spegnere il responiveness? Tutto l'aiuto è apprezzato.

Inoltre, recentemente ho letto che in Bootstrap 2.0 basta rimuovere il responive CSS di boostrap, ma in 3.0 è cotto in un file css.

Grazie.

fonte

2013-08-09 user023

Basta usare '.col-lg-' dentro '.row', non' .col-sm' o '.col'. Un'altra cosa che puoi fare è semplicemente cercare chiamate '@ media' ed eliminarle e tutte all'interno. – RaphaelDDL

grazie per la risposta. sto usando .col-lg- all'interno di un .row già, ancora va a responive. ha anche provato a eliminare le cose @media. nessuna differenza di pensiero. – user023

Le classi '.col-lg-X' e' .col-sm-X' cambiano le larghezze e smettono di fluttuare a larghezze di diversi supporti. Desiderate attenervi alle semplici classi '.col-X', che fluttuano sempre e hanno una larghezza percentuale costante che non cambia in base al supporto. Vedi se la mia risposta qui sotto è ciò che stai cercando. –

EDIT: mio codice qui sotto è stato scritto per v3.0.0RC2, ma in v3.0.0 docs ha una sezione specificamente su questa questione: http://getbootstrap.com/getting-started/#disable-responsive

Utilizzare le classi col-xs-X dal momento che sono larghezze percentuali costanti. Quindi la reattività viene fornita da .container utilizzando max-width con formati di supporti diversi. È possibile definire il proprio alternativa al .container e utilizzare tutto il resto, come normale:

Fiddle per l'esempio qui sotto: http://jsfiddle.net/xTePL/

HTML:

<!-- Don't use .container at all or you will have to 
    override a lot of responsive styles. --> 
<div class="container-non-responsive"> 
    <div class="row"> 
    <div class="col-xs-4"> 
     <h1>Welcome to Non-responsive Land</h1> 
    </div> 
    <div class="col-xs-8"> 
     <!-- More content, more content --> 
    </div> 
    </div> 
</div>

CSS:

.container-non-responsive { 
    /* Margin/padding copied from Bootstrap */ 
    margin-left: auto; 
    margin-right: auto; 
    padding-left: 15px; 
    padding-right: 15px; 

    /* Set width to your desired site width */ 
    width: 1170px; 
}

fonte

2013-08-09 19:02:43

Con v3.0.0RC2 classi col-X dovrebbero essere sostituito con col-xs-X –

Questo non fa nulla. Non puoi semplicemente impostare una larghezza su .container ed essere fatto? – Moss

@Moss Nope. Non so perché ancora, ma basta impostare la larghezza non lo farà. La risposta di Ssorallen funzionava comunque come un incantesimo. Grazie! – CrazyPaste

mi piace la soluzione (accettata) di @ssorallen. Questa soluzione non disattiva tutte le funzionalità di risposta come richiesto.

@grid-float-breakpoint (valore predefinito 768px) consente di ridurre il menu e imposta l'allineamento delle etichette del modulo in base alla larghezza dello schermo. Anche la larghezza delle modal e dei caroselli dipende da questa impostazione.

Per ulteriori informazioni, vedere: http://bassjobsen.weblogs.fm/compile-twitters-bootstrap-3-without-responsive-features/

aggiornamento controllo sul link qui sotto da @skelly troppo. Si noti che questo non modifica ancora la griglia-float-breakpoint né questa soluzione riduce il codice. Ulteriori versioni di TB3 saranno probabilmente split up some less files. Questo renderà più facile compilare una versione non responsiva.

fonte

2013-08-12 11:11:41

C'è anche qualche indicazione per questo sono i documenti Bootstrap: http://getbootstrap.com/getting-started/#disable-responsive – ZimSystem

@Skelly. Grazie per aver aggiunto questo link. Questa soluzione non reimposta il '@ grid-float-breakpoint' e non riduce il codice. –

Basta cercare per disabilitare tutte le query multimediali e commentarle nel file bootstrap.css. Non ci vogliono più di pochi minuti.

Quindi è necessario impostare una larghezza fissa sul div esterno che imposta il contenuto della pagina. Questo di solito è .container in bootstrap o qualcosa come #wrapper è anche comune. 960px o che cosa è giusto per il tuo sito.

È inoltre necessario rimuovere o commentare la metatag viewport nella tua testa HTML. Se non ce n'è uno allora va anche bene (anche se sarà necessario aggiungere uno a fare se si vuole che reattivo).Ecco come si presenta:

fonte

2013-10-04 16:46:50 Sharma

Ecco cosa ha funzionato per me:

<meta name='viewport' content='width=1190'>

volevo un po 'di un margine intorno al mio contenuti in modo anche che ho fatto

.container{ 
    width: 1150px !important; 
}

testato su iPad e iPhone.

fonte

2013-11-18 05:04:01 machineboy2045

Siamo spiacenti, questo non ha funzionato nel mio caso particolare. –

Come disattivare completamente la funzione di risposta da Twitter Bootstrap 3?

risposta

Problemi correlati