html - 如何覆盖 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/

如果我将窗口大小调整为低于 768 像素，来自 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-horizo​​ntal dl-horizo​​ntal-info 在我调整窗口大小后仍然垂直对齐。

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

不是这样的

Answer 1

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

嗯，他们没有。

在这方面，Bootstrap 并没有“覆盖”您给定的格式 - 但它是添加 float:left，这首先会导致您想要的行为，仅当视口(viewport)宽度大于 767px 时:

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

因此低于 768px 时缺少此格式，因此应用浏览器样式表中的默认样式。

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

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

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