媒体查询适用于 bootstrap classes 但不适用于我的 id 或 class

Question

我对此有点陌生，如果这是一个愚蠢的问题，我深表歉意，只是在别处找不到答案。

我正在构建一个包含几组 colspan 6 的表单，以创建 2 列的效果。当使用大视口时，我需要组建一个小组来覆盖一些空的 space。我有以下 CSS 适用于表格：

@media screen and (min-width: 992px) {
  .dxbs-fl-gt.col-lg-6.col-12 {
    position: relative;
    top: -105px;
  }
}

这一切都很好，很花哨，直到我检查了一个类似的表格，发现它的一个组现在被提升，使该表格看起来不合时宜。为了只影响第一种形式，我尝试用 div class 替换 bootstrap classes (.dxbs-fl-gt.col-lg-6.col-12)（然后是一个 id，因为它是仅针对这一点），但就好像 CSS 现在完全被忽略了。为了完整起见，这是我的新 CSS：

@media screen and (min-width: 992px) {
  #vendorAddressGroup {
    position: relative;
    top: -105px;
  }
}

我试过将我的 div 标签移动到多个位置，所有这些位置都围绕着群组，但没有任何效果。谁能建议下一步该做什么？

我的HTML:

                        <div id="vendorAddressGroup">
                            <DxFormLayoutTabPages ColSpanXs="12"
                                                  ColSpanLg="6"
                                                  ActiveTabIndex="@ActiveTabIndex1">
                                <DxFormLayoutTabPage Caption="Main">
                                    @switch (ActiveTabIndex1)
                                    {
                                        case 0:
                                            @*Address Group*@

                                            <DxFormLayoutGroup Caption="Address"
                                                               ColSpanXs="12"
                                                               ColSpanMd="12"
                                                               ColSpanLg="12">
                                                @*Various <DxFormLayoutItem>s*@
                                            </DxFormLayoutGroup>
                                            @*Contact Group*@
                                            <DxFormLayoutGroup Caption="Contact"
                                                               ColSpanXs="12"
                                                               ColSpanMd="12"
                                                               ColSpanLg="12">
                                                @*Various <DxFormLayoutItem>s*@
                                            </DxFormLayoutGroup>

                                            break;
                                    }
                                </DxFormLayoutTabPage>

                                <DxFormLayoutTabPage />
                                <DxFormLayoutTabPage />
                                <DxFormLayoutTabPage />
                            </DxFormLayoutTabPages>
                        </div>

Answer 1

根据 DevEx，需要获取 DevEx Blazor 21.1.5，“在 DxFormLayoutGroup 元素中包装选项卡并为此元素指定 CssClass 属性。然后，您可以使用此 CSS class 创建特定于该组的媒体查询。”还不能更新所以不能测试，但听起来很有希望。