Ho riscontrato un fastidioso "problema" con il miosito Web, utilizzando Twitter Bootstrap. Ho un container principale usando la classe bootstrap di default .container e gli ho dato una larghezza specifica nel mio file css personalizzato. Tuttavia, quando ho incluso il file bootstrap-responsive.css nel mio documento HTML, sembra sovrascrivere la larghezza del mio contenitore.
Questo è l'ordine dei miei file CSS:
<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="/css/Site.css"/>
<link rel="stylesheet" href="/css/bootstrap-responsive.css"/>
Per quale motivo esiste una larghezza specificata nel file CSS reattivo? Esiste un modo semplice per risolvere questo problema senza modificare manualmente il bootstrap-responsive.css (che secondo me sarebbe una cattiva idea)
Ho bisogno del bootstrap-responsive.css per rendere il mio sito mobile / tablet-friendly.
risposte:
1 per risposta № 1È una larghezza minima nel bootstrap che è necessaria per mantenere una struttura adeguata. D'altra parte, puoi semplicemente inserire il tuo codice CSS DOPO bootstrap reattivo in modo che la tua regola sovrascriva la regola di bootstrap.
0 per risposta № 2
Personalmente, tendo a caricare la mia abitudinefoglio di stile dopo tutti gli altri file CSS. Ma poi, devi assicurarti di non modificare alcun valore predefinito per le proprietà globali ... o le proprietà relative al layout, ad es .: .contenitore
In generale, questa classe viene riutilizzata più voltee potrebbe essere regolato per diversi dispositivi e situazioni. Quindi, suggerisco di cambiare tali valori in bootstrap-responsive.css Questo è il file che contiene tutte le tue media query.
Altrimenti si finisce con l'override della reattività desiderata e ciò potrebbe comportare proprietà CSS con! Importanti eccezioni. Questo dovrebbe essere evitato con ogni mezzo.
0 per risposta № 3
Quando si utilizza CSS, l'ultima istanza di un'informazione di stile ha la priorità. Ad esempio, se collego a due diversi fogli di stile, il secondo avrà la priorità in caso di conflitto ...
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
<link rel="stylesheet" type="text/css" href="bootstrap-responsive.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
In questo esempio, se il.L'elemento container è un cambiamento nel file style.css, i dati di stile in style.css avranno la priorità solo in caso di conflitto. Questo effetto è simile alla presenza di CSS sia esterni che incorporati in un singolo documento HTML. Ecco un jsFiddle illustrare. Qui vedi che lo stile in linea ha avuto la priorità e ha reso il colore del testo arancione, mantenendo lo sfondo nero.