如何覆盖Bootstrap CSS中定义的媒体查询

Question

I dont want media Queries defined in bootstrap CSS to override my custom CSS when user resizes his window..

my code 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/

If i resize the window to lower than 768px, the media query from Bootstrap CSS overrides my custom css and dt dd aligns vertically, i want them to align horizontally.

How can i do so ?

i have found this code in Bootstrap.css causing this

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;
  }
}

so i have modified above to this code in my custom.css

CSS

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

But dl-horizontal dl-horizontal-info still aligns vertically after i resize the window.

i want my dl to look like this , even after i resize the window.

and not like this

Answer 1

I dont want media Queries defined in bootstrap CSS to override my custom CSS when user resizes his window.

Well, they don't.

Bootstrap is not “overriding” your given formatting in that regard – but it is adding float:left , which causes the behavior you want in the first place, only when the viewport width is above 767px:

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

So below 768px this formatting is missing, and therefor the default styling from the browser stylesheet is applied.

If you want your dt to float left even below that viewport width, then you have to add it via your own rules too:

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

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

Answer 2

Try this in your Custom.css

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