Html 如何覆盖引导CSS中定义的媒体查询

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

我的代码 HTML

如果我将窗口大小调整到低于768px，则引导CSS中的媒体查询将覆盖我的自定义CSS，并且

dt

dd

垂直对齐，我希望它们水平对齐。

我怎样才能做到

我在Bootstrap.css中发现了导致这种情况的代码

CSS

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

CSS

但是调整窗口大小后，

dl horizontal dl horizontal info

仍然垂直对齐

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

而不是像这样

---

在Custom.css中尝试此功能

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

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

嗯，他们没有

在这方面，引导并没有“覆盖”您给定的格式，而是添加了

float:left

，只有当视口宽度大于767px时，它才会首先导致您想要的行为：

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

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

如果您希望您的

dt

即使在该视口宽度以下也向左浮动，那么您也必须通过自己的规则添加它：

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

@media（最小宽度：768px）{.dl水平dd{左边距：0px！重要}此左边距应为0。我从我这一头就试过了，因为它起作用了。你能检查一下这个吗

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

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

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

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