Bootstrap 3水平dl：如何更改dt宽度？

Question

我正在使用Bootstrap的水平定义列表，只需进行一些更改。

我的dt需要保持对齐状态，因为我知道内容的宽度，我将其从默认值中减少。这是我正在申请的SCSS规则：

dl.dl-horizontal {
  dt {
    width: 120px;
    text-align: left;
  }
  dd {
    margin-left: 135px;
  }
}

这一切正常，直到我进入小型设备。在这些视口中，我看到Bootstrap将dd上的左边距设置为0.这是我的尝试：

@media only screen and (max-width: 768px) {
  dl.dl-horizontal dd {
    margin-left: 0;
  }
}

但它并没有生效。

在浏览器控制台中，我可以看到媒体查询已应用于dd，但已被非媒体查询规则覆盖。据我所知，这两个规则的特殊性是相同的，我尝试在非媒体查询规则的上方和下方查找媒体查询。

Answer 1

尝试将！important标记添加到您的SCSS代码中。

@media only screen and (max-width: 768px) {
  dl.dl-horizontal dd {
    margin-left: 0 !important;
  }
}

希望它有所帮助！