Qual è il modo corretto per sovrascrivere la posizione del CSS di un elemento: relativo; ' utilizzando Bootstrap 2.2.1?

Question

Sto lavorando a un progetto utilizzando il bootstrap di Twitter 2.2.1 Initializr boilerplate. Per sovrascrivere correttamente gli attributi CSS predefiniti di Bootstrap è necessario creare una voce per la classe interessata in "main.css" e aggiungere gli attributi desiderati.

In questo caso particolare Bootstrap ha una classe chiamata '.collapse' che viene applicata alla barra di navigazione predefinita.

.collapse{ 
    position:relative; 
    height:0; 
    overflow:hidden; 
    -webkit-transition:height .35s ease; 
    -moz-transition:height .35s ease; 
    -o-transition:height .35s ease; 
    transition:height .35s ease 
} 

La parte che causa problemi per me è la "posizione: relativa". Ho bisogno che non ci sia alcuna istruzione di posizione. Ora so che posso solo aprire il file CSS Bootstrap e modificarlo, ma se il file viene aggiornato tale modifica andrà persa.

Qual è il modo corretto di ignorare questa voce CSS?

Answer 1

Includi il tuo file CSS dopo il bootstrap.css e scrivi una regola con lo stesso selettore. Per quanto riguarda la proprietà position, è possibile utilizzare position: static; o qualsiasi altra cosa sia necessaria.

Answer 2

Se è solo una proprietà è possibile aggiungere CSS in linea con l'elemento html e reimpostare la proprietà position al suo valore di default:

<nav class="collapse" style="position:static"> 
    <ul> 
    <li>....</li> 
    <li>....</li> 
    </ul> 
</nav> 

Ma se pensate di cambiare/aggiungere altri stili, allora si dovrebbe aggiungi il tuo file CSS dopo bootstrap.css, con il quale tutti gli stili sovrascriveranno il css di bootstrap predefinito.