Come posso sovrascrivere gli stili su Twitter Bootstrap? Ad esempio, attualmente sto usando una classe .sidebar con la regola CSS 'float: left;' Come posso cambiarlo in modo che vada invece a destra? Sto usando HAML e SASS ma sono relativamente nuovo allo sviluppo web.
Risposte:
Aggiungi la tua classe, es: <div class="sidebar right"></div>con 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's ( bootstrap.css), puoi sovrascrivere le regole ridefinendole.
Ad esempio, se è così che includi CSS nel tuo <head>
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/site-specific.css" />
Puoi semplicemente spostare la barra laterale verso destra scrivendo (nel tuo site-specific.cssfile):
.sidebar {
float: right;
}
Perdona la mancanza di HAML e SASS, non li conosco abbastanza bene da scrivere tutorial in essi.
!importantè che non potrai mai sostituirlo di nuovo in futuro.
Site.cssviene raggruppato, elencato Bundle.confige reso fisicamente dopo, bootstrap.css ma gli stili non vengono ancora ignorati. Ho dovuto prendere il site.cssriferimento dal pacchetto modernizzatore e inserirlo manualmente dopo il bootstrap.css(e premere Ctrl + F5 una volta debug per cancellare la cache)
La risposta a questa è la specificità CSS. Devi essere più "specifico" nel tuo CSS in modo che possa sovrascrivere le proprietà del bootstrap css.
Ad esempio hai un codice di esempio per un menu bootstrap qui:
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div id="home-menu-container" class="collapse navbar-collapse">
<ul id="home-menu" class="nav navbar-nav">
<li><a class="navbar-brand" href="#"><img src="images/xd_logo.png" /></a></li>
<li><a href="#intro">Home</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#services">What We Do</a></li>
<li><a href="#process">Our Process</a><br /></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact Us</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
Qui, è necessario ricordare la gerarchia della specificità. Va così:
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 hai definito il .navbar adopo .navbar ul li a, continuerà a sovrascrivere con un colore rosso, anziché un verde poiché la specificità è maggiore (13 punti).
Quindi, praticamente tutto ciò che devi fare è calcolare i punti per l'elemento per cui vuoi cambiare il CSS, tramite ispeziona l'elemento sul tuo browser. Qui, bootstrap ha specificato i suoi 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;
}verrà ancora visualizzato come # 999. Per risolverlo, 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 funzionerà il seguente css:
#home-menu-container #home-menu li a { color: red; } /* 100 + 100 + 1 + 1 = 202 points :) */Fatto.
È possibile fare riferimento a questo collegamento MDN .
blockquotestile nel CSS Bootstrap. Stranamente, era sbagliato per le normali quotazioni, ma sembrava giusto e <ul> all'interno di una quotazione. La chiave stava aggiornando il mio CSS per avere blockquote p, che ha dato abbastanza priorità. <ul> lo stava facendo per l'altra sezione della pagina.
Puoi sovrascrivere una classe CSS rendendola "più specifica".
Si passa all'albero HTML e si specificano gli elementi padre:
div.sidebar { ... } è più specifico di .sidebar { ... }
Puoi andare fino a BODY se devi:
body .sidebar { ... } sovrascriverà praticamente qualsiasi cosa.
Vedi questa guida pratica: http://css-tricks.com/855-specifics-on-css-specificity/
Se vuoi sovrascrivere qualsiasi CSS nel bootstrap, usa! Important
Diciamo che qui è la classe di intestazione di pagina in bootstrap che ha un margine di 40px in cima, al mio cliente non piace e vuole che sia 15 in cima e 10 solo in fondo
.page-header {
border-bottom: 1px solid #EEEEEE;
margin: 40px 0 20px;
padding-bottom: 9px;
}Quindi ho aggiunto in classe il mio file site.css con lo stesso nome in questo modo
.page-header
{
padding-bottom: 9px;
margin: 15px 0 10px 0px !important;
}Nota il! Important con il mio margine, che sovrascriverà il margine del margine della classe dell'intestazione di pagina bootstarp.
Sono arrivato fino a 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
Modifica uno di essi, ad esempio:
$bodyBackground: red;
@import "bootstrap";In alternativa, se non è disponibile una variabile per ciò che si desidera modificare, è possibile ignorare gli stili o aggiungerne di propri.
Sass:
@import "bootstrap";
/* override anything manually, like rounded buttons */
.btn {
border-radius: 0;
}Vedi anche questo: Corretta struttura degli asset SCSS in Rails
So che questa è una vecchia domanda, ma ancora, ho riscontrato un problema simile e mi sono reso conto che il mio codice CSS "non funzionante" nel mio bootstrapOverload.cssfile è stato scritto dopo il media queries. quando l'ho spostato sopra le media query ha iniziato a funzionare.
Nel caso in cui qualcun altro si trovi ad affrontare lo stesso problema