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

Question

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

我的代码 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/

如果我将窗口的大小调整为低于768px，则Bootstrap CSS的媒体查询会覆盖我的自定义css，而dt dd会垂直对齐，我希望它们水平对齐。

我该怎么办？

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

所以我在custom.css中修改了上面的代码

CSS

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

但是在调整窗口大小后，dl-horizontal dl-horizontal-info仍然垂直对齐。

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

而不喜欢这个

Answer 1

  

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

嗯，他们没有。

在这方面，Bootstrap不会“覆盖”您给定的格式 - 但它是添加 float:left，这会导致您想要的行为，仅当视口宽度为超过767px：

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

因此，在768px以下缺少此格式，因此应用了浏览器样式表中的默认样式。

如果您希望dt向左浮动，甚至低于该视口宽度，那么您也必须通过自己的规则添加它：

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

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

Answer 2

在Custom.css

中试试

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