为什么我的媒体查询变量在 Bootstrap 中不起作用？

Question

我目前是 Bootstrap (3.3.4) 的新手，我的启动站点页脚位置似乎有问题。我只希望页脚固定在大屏幕（平板电脑和电脑）上，而不是移动设备上。

由于 Bootstrap 现在是移动优先，我没有在我的 CSS 中明确声明我的页脚位置样式（因为我不想固定它）除了我的大屏幕媒体查询：

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) {
        
  /* Pull out the header and footer */
  .mastfoot {
    position: fixed;
    bottom: 0;
  }

}

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) {
    
  /* Pull out the header and footer */
  .mastfoot {
    position: fixed;
    bottom: 0;
  }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) {

  /* Pull out the header and footer */
  .mastfoot {
    position: fixed;
    bottom: 0;
  }
}

然而，这导致它无法在任何设备中修复。当我在我的媒体查询之外设置以下内容时，它最终会在我也不想要的每个设备中得到修复：

.mastfoot {
    position: fixed;
    bottom: 0;
}

如何才能让我的网站仅针对宽度大于 768 像素的设备显示固定页脚？

Answer 1

您在代码中显示的不是 CSS，而是 "LESS"。如果您将它用于您的 CSS，它将不起作用。您正在为媒体查询使用 LESS 变量，例如：

@screen-sm-min, @screen-md-min, and @screen-lg-min

您要确保将变量更改为 CSS 的实际像素尺寸，如下所示：

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

  /* Pull out the header and footer */
  .mastfoot {
    position: fixed;
    bottom: 0;
  }
}

当您对 LESS 更加熟悉时，更明智的做法是在 LESS 文件本身中进行这些修改，然后输出 CSS。虽然这是主观的，但更建议学习 SASS 而不是 LESS。

但这是一个完全不同的讨论。

为什么我的媒体查询变量在 Bootstrap 中不起作用？

Why aren't my media query variables working in Bootstrap?

html

css

less

twitter-bootstrap