如何覆盖BootstrapCSS中定义的媒体查询-HowcanioverwritemediaqueriesdefinedinBootstrapCSS

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

我不希望在用户调整窗口大小时,在bootstrap CSS中定义的媒体查询覆盖我的自定义CSS。

my code HTML

我的代码HTML

item 1
description 1 
item 2
description 2
item 3
description 3
item 4
description 4
item 5
description 5




item 11
description 11 
item 12
description 12
item 13
description 13
item 14
description 14
item 15
description 15

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.

如果我将窗口调整为低于768px,来自Bootstrap CSS的媒体查询将覆盖我的自定义css并且dt dd垂直对齐,我希望它们水平对齐。

How can i do so ?

我怎么能这样做?

i have found this code in Bootstrap.css causing this

我在Bootstrap.css中发现了这个代码

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

所以我在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.

但是在调整窗口大小后,dl-horizo​​ntal dl-horizo​​ntal-info仍然垂直对齐。

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

我希望我的dl看起来像这样,即使在我调整窗口大小之后。

and not like this

而不是这样

2 个解决方案

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

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

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