Come sovrascrivere lo stile in Twitter Bootstrap

Come posso sovrascrivere gli stili in Twitter Bootstrap? Per esempio, attualmente sto usando una class .sidebar che ha la regola CSS ‘float: left;’ Come posso cambiare questo in modo che vada a destra invece? Sto usando HAML e SASS ma sono relativamente nuovo allo sviluppo web.

Aggiungi la tua class, es:

, con il CSS come

 .sidebar.right { float:right } 

Tutti questi suggerimenti funzioneranno, ma un modo più semplice potrebbe essere quello di includere il foglio di stile dopo gli stili Bootstrap.

Se includi il tuo css ( site-specific.css ) dopo Bootstrap ( bootstrap.css ), puoi ridefinire le regole ridefinendole.

Ad esempio, se questo è il modo in cui includi i CSS nel

   

Puoi semplicemente spostare la barra laterale a destra scrivendo (nel tuo file site-specific.css ):

 .sidebar { float: right; } 

Perdona la mancanza di HAML e SASS, non li conosco abbastanza bene da scrivere tutorial in loro.

La risposta a questo è la specificità CSS. Devi essere più “specifico” nel tuo CSS in modo che possa sovrascrivere le proprietà di bootstrap css.

Ad esempio, hai un codice di esempio per un menu di bootstrap qui:

  

Qui, è necessario ricordare la gerarchia della specificità. Va così:

  • Dare un elemento con un ID menzionato 100 punti
  • Dai un elemento con una class di cui 10 punti
  • Dare ad un elemento semplice un singolo punto

Quindi, per quanto sopra se il tuo css ha qualcosa del genere:

 .navbar ul li a { color: red; } /* 10(.navbar) + 1(ul) + 1(li) + 1(a) = 13 points */ .navbar a { color: green; } /* 10(.navbar) + 1(a) = 11 points */ 

Quindi, anche se è stato definito il .navbar a dopo .navbar ul li a esso continuerà a sovrascrivere con un colore rosso, invece di un verde poiché la specificità è più (13 punti).

Quindi, in pratica tutto ciò che devi fare è calcolare i punti per l’elemento per cui vuoi cambiare il css, tramite l’elemento inspect sul tuo browser. Qui, bootstrap ha specificato il suo css per l’elemento come

 .navbar-inverse .navbar-nav>li>a { /* Total = 22 points */ color: #999; } 

Quindi, anche se il tuo css sta caricando viene caricato dopo bootstrap.css che ha la seguente riga:

 .navbar-nav li a { color: red; } 

sarà comunque reso come # 999. Per risolvere questo problema, bootstrap ha 22 punti (calcola tu stesso). Quindi tutto ciò di cui abbiamo bisogno è qualcosa di più. Pertanto, ho aggiunto ID personalizzati agli elementi, ad esempio home-menu-container e home-menu. Ora il seguente css funzionerà:

 #home-menu-container #home-menu li a { color: red; } /* 100 + 100 + 1 + 1 = 202 points :) */ 

Fatto.

È ansible fare riferimento a questo collegamento MDN .

Puoi sovrascrivere una class CSS rendendola “più specifica”.

Si passa alla struttura HTML e si specificano gli elementi principali:

div.sidebar { ... } è più specifico di .sidebar { ... }

Puoi andare fino a BODY se hai bisogno di:

body .sidebar { ... } annullerà praticamente qualsiasi cosa.

Vedi questa pratica guida: http://css-tricks.com/855-specifics-on-css-specificity/

Puoi semplicemente assicurarti che il tuo file css analizzi AFTER boostrap.css, in questo modo:


Se si desidera sovrascrivere qualsiasi css in bootstrap, l’uso è importante

Diciamo che qui è la class di intestazione di pagina in bootstrap che ha il margine di 40px in cima, il mio cliente non mi piace e vuole che sia 15 in alto e 10 solo in basso

 .page-header { border-bottom: 1px solid #EEEEEE; margin: 40px 0 20px; padding-bottom: 9px; } 

Così ho aggiunto sulla class nel mio file site.css con lo stesso nome come questo

 .page-header { padding-bottom: 9px; margin: 15px 0 10px 0px !important; } 

Nota il! Importante con il mio margine, che sovrascriverà il margine del margine della class intestazione pagina bootstarp.

È arrivato tardi, ma penso che potrebbe usare un’altra risposta.

Se stai usando sass, puoi effettivamente cambiare le variabili prima di importare bootstrap. http://twitter.github.com/bootstrap/customize.html#variables

Cambia qualcuno di loro, ad esempio:

 $bodyBackground: red; @import "bootstrap"; 

In alternativa, se non è disponibile una variabile per ciò che si desidera modificare, è ansible sovrascrivere gli stili o aggiungerne di propri.

Sass:

 @import "bootstrap"; /* override anything manually, like rounded buttons */ .btn { border-radius: 0; } 

Vedi anche: Struttura della risorsa SCSS corretta in Rails

So che questa è una vecchia domanda, ma ancora, mi sono imbattuto in un problema simile e ho capito che il mio codice “non funzionante” css nel mio file bootstrapOverload.css stato scritto dopo le media queries . quando l’ho spostato sopra le query multimediali, ha iniziato a funzionare.

Nel caso in cui qualcun altro si trovi di fronte allo stesso problema