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

\n

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

\n

\n\n

好吧，他们不\xe2\x80\x99t。

\n\n

Bootstrap 不是 \xe2\x80\x9coverriding\xe2\x80\x9d 您在这方面给出的格式 \xe2\x80\x93 但它正在添加 float:left，这会导致您首先想要的行为，只有当视口宽度高于767 像素：

\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n