Bootstrap Tabler搜索控件页面差异化尺寸设置问题求助

核心错误根源 #

1. CSS @namespace 误用：该规则仅用于XML命名空间（如SVG、MathML），完全无法通过URL实现页面样式区分，当前写法无效。
2. 类名不匹配：输入框的类为o-form-control--browsing/o-form-control--search，但CSS选择器写的是.c-input-group-text--browsing/.c-input-group-text--search，无法匹配目标元素。
3. 语法错误：search.css的媒体查询多了一个闭合括号@media (min-width: 576px))，导致CSS解析失败。

修复步骤 #

1. 给页面根元素添加唯一标识类

在每个页面的<body>标签上添加专属类，用于区分页面：

• index.php：<body class="page-index">
• search.php：<body class="page-search">

2. 修正全局样式（main.css）

匹配输入框的正确类名：

@media (min-width: 576px) {
  .o-form-control--browsing,
  .o-form-control--search {
    width: auto;
  }
}

3. 重构browsing.css（仅index.php引入）

通过页面根类限定样式，无需!important：

@media (min-width: 576px) {
  .page-index .o-form-control--browsing {
    width: 100%;
  }
}

4. 重构search.css（仅search.php引入）

修正语法错误并通过页面根类限定样式：

@media (min-width: 576px) {
  .page-search .o-form-control--search {
    width: 142px;
  }
}

补充说明 #

• 这种通过页面根类限定样式的方式是前端区分页面样式的标准方案，优先级清晰、易于维护。
• 尽量避免使用!important，通过选择器层级（页面类+元素类）即可覆盖全局样式，减少冲突风险。
• 确保每个页面仅引入对应的专属CSS文件，避免冗余样式加载。

内容的提问来源于stack exchange，提问作者ORV