我如何覆盖在Bootstrap CSS中定义的媒体查询 [英] How can i overwrite media queries defined in Bootstrap CSS

问题描述

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

我的代码
HTML

 < div class =row> 
< div class =col-xs-6> 
< dl class =dl-horizo​​ntal dl-horizo​​ntal-info custom> 
< dt>项目1< / dt> 
< dd>说明1< / dd> 
< dt>项目2< / dt> 
< dd>说明2< / dd> 
< dt>项目3< / dt> 
< dd>说明3< / dd> 
< dt>项目4< / dt> 
< dd>说明4< / dd> 
< dt>项目5< / dt> 
< dd>说明5< / dd> 
< / dl> 
< / div> 
< div class =col-xs-6> 
< dl class =dl-horizo​​ntal dl-horizo​​ntal-info custom> 
< dt>项目11< / dt> 
< dd>说明11< / dd> 
< dt>项目12< / dt> 
< dd>说明12< / dd> 
< dt>项目13< / dt> 
< dd>说明13< / dd> 
< dt>项目14< / dt> 
< dd>说明14< / dd> 
< dt>项目15< / dt> 
< dd>说明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} 
  

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

解决方案

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/

这篇关于我如何覆盖在Bootstrap CSS中定义的媒体查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！