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

Question

我正在使用Bootstrap 3并尝试删除/排除中型和大型设备之间的断点.我有一个现有的网站,优化到970px,看起来很棒.我想要做的是删除md> 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 */
  }
}