Come posso sovrascrivere media query definite nel Bootstrap CSS

Question

Non voglio media query definite nel bootstrap CSS per sostituire il mio CSS personalizzato quando l'utente ridimensiona la finestra ..

il mio codice HTML

<div class="row"> 
<div class="col-xs-6"> 
<dl class="dl-horizontal dl-horizontal-info custom"> 
<dt>item 1</dt> 
<dd>description 1 </dd> 
<dt>item 2</dt> 
<dd>description 2</dd> 
<dt>item 3</dt> 
<dd>description 3</dd> 
<dt>item 4</dt> 
<dd>description 4</dd> 
<dt>item 5</dt> 
<dd>description 5</dd> 
</dl> 
</div> 
<div class="col-xs-6"> 
<dl class="dl-horizontal dl-horizontal-info custom"> 
<dt>item 11</dt> 
<dd>description 11 </dd> 
<dt>item 12</dt> 
<dd>description 12</dd> 
<dt>item 13</dt> 
<dd>description 13</dd> 
<dt>item 14</dt> 
<dd>description 14</dd> 
<dt>item 15</dt> 
<dd>description 15</dd> 
</dl> 
</div> 
</div> 

CSS

@import url("http://maxcdn.bootstrapcdn.com/bootswatch/3.2.0/cerulean/bootstrap.min.css"); 
@import url("http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"); 

.custom > dt{width:120px;} 
.custom > dd{margin-left:130px} 

http://jsfiddle.net/afLka00x/

Se ridimensiono la finestra a un valore inferiore a 768px, la query multimediale da Bootstrap CSS sovrascrive il mio css personalizzato e dd si allinea verticalmente, voglio che si allineino orizzontalmente.

Come posso fare?

ho trovato questo codice in Bootstrap.css causare questo

CSS

@media (min-width: 768px) { 
    .dl-horizontal dt { 
    float: left; 
    width: 160px; 
    clear: left; 
    text-align: right; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    } 
    .dl-horizontal dd { 
    margin-left: 180px; 
    } 
} 

così Ho modificato sopra a questo codice nel mio custom.css

CSS

@media (min-width: 768px) { 
    .dl-horizontal dt { 
    width:120px; 
    } 
    .dl-horizontal dd { 
    margin-left:130px 
    } 
} 

Ma dl-horizontal dl-horizontal-info si allinea ancora verticalmente dopo aver ridimensionato la finestra.

voglio che il mio dl assomigli a questo, anche dopo aver ridimensionato la finestra.

e non come questo

Answer 1

Non voglio media query definiti in bootstrap CSS per sostituire il mio CSS personalizzato quando l'utente ridimensiona la sua finestra.

Bene, non lo fanno.

Bootstrap non è “prevalente” la tua data di formattazione a questo proposito - ma è aggiungendofloat:left, che fa sì che il comportamento che si desidera, in primo luogo, solo quando la larghezza della vista è al di sopra 767px:

@media (min-width: 768px) 
    .dl-horizontal dt { 
    float:left; 
    } 
} 

Quindi sotto 768px manca questa formattazione e quindi viene applicato lo stile predefinito dal foglio di stile del browser.

Se volete che il vostro dt galleggiare a sinistra, anche sotto di tale larghezza finestra, poi si deve aggiungere che tramite le proprie regole troppo:

.custom > dt{ 
    float:left; 
    width:120px; 
} 

http://jsfiddle.net/afLka00x/1/

Answer 2

Prova questo nella vostra custom.css

@media (min-width: 768px) { 
     .dl-horizontal > dt{ width: 120px!important;float: left; 
     clear: both;} 
}