Bootstrap 3 - 删除md和lg之间的断点

Question

我正在使用Bootstrap 3并尝试删除/排除中型和大型设备之间的断点。我有一个现有的网站，优化到970px，看起来很棒。我想要做的是删除md＆gt; lg断点使得即使在大型宽屏桌面上，最大主体宽度也是970px并且仍然居中。

有人知道是否有针对此的quickfix解决方案吗？

非常感谢任何建议

Decbrad

Answer 1

如果你要覆盖bootstrap断点（并正确使用容器），那么在bootstrap CSS文件中的bootstrap断点媒体查询下面添加这个应该适合你。

如果使用LESS

@media (min-width: @screen-lg) { 
  .container {
      width: 970px;
   }
}

或者，您可以简单地在自己的CSS中覆盖引导容器（只需确保在bootstrap.css之后加载它）

@media (min-width: 970px) and (max-width: 2500px) {
   .container {
      width: 970px;
   }   
}

或者你可以在1240行左右的bootstrap.css文件中找到媒体查询，只需在那里更改

@media (min-width: 1200px) {
  .container {
     width: 1170px;  /* change 1170 to 970 */
  }
}

Answer 2

越少越好，但这个更灵活可靠：

@media (min-width: @screen-sm) { .container { width:@screen-md; } }

因为在bootstraps默认值中，@ screen-md的宽度是992px。 现在，您将只为小型设备（智能手机）和任何其他更大的设备提供断点。他们都会得到相同的布局

Answer 3

您可以在容器上设置最大宽度：

.container-fluid,
.container {
  // Disable large-desktop breakpoint.
  max-width: $container-md;
}

无需媒体查询或其他任何内容。

$container-md值通常为970px，除非您更改了$grid-gutter-width。对于LESS，将$变量替换为@。对于常规CSS，将变量替换为硬编码像素大小。