Come rendere Bootstrap più "compatto"

Voglio avere lo stesso aspetto "Compatto" - in termini di font-size, padding e l'uso generale dello spazio come ottengo quando utilizzo lo zoom del browser (Ctrl--) . Certamente senza gli effetti collaterali la riduzione più importante in larghezza di contenitore.Come rendere Bootstrap più "compatto"

Ho provato a giocherellare con le @baseFontSize e @baseLineHeight variabili a schermo http://getbootstrap.com/2.3.2/customize.html di download della Bootstrap ma mi manca qualcosa come il risultato:

Non sembra giusto - in termini di equilibrio, imbottitura non è giusto .
Interruzioni sullo schermo del proiettore (l'orrore!): Selezionare le caselle, il layout, tutto diventa matto.

Si prega di salvarmi!

fonte

2013-09-03 Ali Zaidi

Se ho capito bene la tua domanda, con lo zoom indietro, vuoi mantenere il comportamento del testo così com'è, ma anche mantenere la larghezza del contenitore uguale? È ovvio che lo zoom indietro ridurrà la larghezza del contenitore, a meno che tu non stia utilizzando il 100% della larghezza o adattando le dimensioni usando javascript (guarda Google Drive). Raccomando di fornire una pagina web o un violino e spiegare cosa si vuole ottenere su un progetto reale. –

@maremp Ho menzionato lo zoom del browser perché strettamente correlato con il risultato finale desiderato, ovvero riducendo il contenuto delle dimensioni e lo spazio (riempimento nei campi, celle di tabella, ecc.) Mantenendo le proporzioni corrette. Man mano che le soluzioni vanno, speravo di farlo in CSS e non in Javascript, dato che in sostanza non sono alla ricerca di dinamismo. Questo è il motivo per cui non ho postato un violino. Grazie per il tuo commento, però, mi ha permesso di portare più chiarezza al tavolo (si spera). –

Mi chiedo se questo è un problema correlato al foglio di stile reattivo. È difficile dare una risposta definitiva senza sapere se si sta lavorando con o senza il foglio di stile reattivo. Ma se lo sei, il layout non rimarrà proporzionato a uno schermo più grande perché è reattivo. Quindi, se hai quel foglio di stile, prova a rimuoverlo.

fonte

2013-10-02 14:16:51 innerurge1

Quando dico che si rompe sullo schermo del proiettore, intendo i singoli componenti e non il layout generale. Ad esempio, giocherellare con baseFontSize farà apparire strani gli input dato che il testo non è più allineato verticalmente al centro. Se poi gioco con baseLineHeight, il testo diventa corretto, ma la freccia sul lato destro delle caselle di selezione si interrompe. –

Ho due suggerimenti.

In primo luogo, stai utilizzando Bootstrap 2.3.2 per il tuo link sopra? Potresti essere in grado di risolvere più facilmente i tuoi problemi usando il nuovo scaffolding che ha boostrap 3.0 (e versioni successive). È un po 'difficile aggiornare il tuo sito, ma ci sono dei convertitori automatici e il nuovo sistema è MOLTO meglio su cui lavorare e potrebbe essere d'aiuto.

In secondo luogo, un altro trucco CSS da tenere in considerazione è il peso del font e l'altezza della linea. Il peso del carattere può rendere il testo più sottile/più spesso (i gradi sono 100, 200, 300, 400, ecc.). Potresti essere in grado di rendere il carattere più sottile, l'altezza della linea inferiore, ma il carattere generale più grande, il che farebbe "compattare" le cose. Se non lo sapevi, vale la pena provare.

font-weight: 200; 
    line-height: 30px;

fonte

2014-04-16 23:30:38 Gu3miles

No. la combinazione di font-weight e line-height non produce l'effetto desiderato. –

Come rendere Bootstrap più "compatto"

risposta

Problemi correlati