html - 列的样式宽度选择器

Question

我在处理表格时遇到了一些问题。基本上，我只想更改 md 屏幕中列的宽度，因此我在类中添加了一个名为 col-pvp 的选择器，而不是仅在 boostrap 中以特定大小设置样式。

我使用了这段代码:

.col-md-1.col-new{
    width: xxx;
 }

这样，宽度只会在 1 和 md 屏幕的列中发生变化，但由于某种原因，当它传递到例如移动设备或平板电脑屏幕(xs，sm)时，列的宽度(col-new)不会'不要回到他原来的尺寸。我无法弄清楚问题所在。

这是我的 HTML:

<div class="col-md-1 col-sm-1 no-right-padding col-new">

Answer 1

发生这种情况的原因是因为您覆盖了 Bootstrap 宽度，并且无论屏幕分辨率是多少，您的宽度都将始终覆盖 Bootstrap 宽度，因为它位于 Bootstrap 样式之后。将您的代码放入这样的媒体查询中

@media screen and (min-width: 992px) {
    .col-md-1.col-new{
        width: ...
    }
}

这样你的宽度只有在屏幕确实是 md 时才会应用。