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：仅在较大的屏幕中显示固定页脚？

1 个答案: