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

【问题标题】：Bootstrap 3 horizontal dl: how to change dt width?Bootstrap 3 水平 dl：如何更改 dt 宽度？
【发布时间】：2018-06-10 06:27:04
【问题描述】：

我正在使用 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，但它已被非媒体查询规则覆盖。据我所知，这两个规则的特异性是相同的，我尝试将媒体查询定位在非媒体查询规则的上方和下方。

【问题讨论】：

【解决方案1】：

尝试将 !important 标签添加到您的 SCSS 代码中。

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

希望对你有帮助！

【讨论】：