媒体查询适用于引导类，但不适用于我的 id 或类

Posted 2023-03-06

【中文标题】媒体查询适用于引导类，但不适用于我的 id 或类

【英文标题】：Media query works with bootstrap classes but not with my id or class

【发布时间】：2021-11-14 12:45:32

【问题描述】：

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

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

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

这一切都很好而且很花哨，直到我查看了一个类似的表格并看到它的一个组现在被提升了，从而使该表格看起来消失了。为了只影响第一种形式，我尝试将引导类 (.dxbs-fl-gt.col-lg-6.col-12) 替换为 div 类（然后是一个 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>

【问题讨论】：

如果您的 ID 不起作用，很有可能是因为您在页面上多次使用了该 ID。你可以只使用一个类吗？

你能给我们看看相关的HTML吗？

感谢@Dominik，但 ID 只使用一次。

ID 选择器不起作用的另一个原因是拼写错误。您能否分享您的 HTML 并在 SO 中使用 sn-p 函数来重现此问题？

@BlazorWolf 为什么不在浏览器中检查页面并复制呈现的 HTML？

【参考方案1】：

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