Bootstrap 3-删除md和lg之间的断点 [英] Bootstrap 3 - remove breakpoint between md and lg

问题描述

我正在使用Bootstrap 3，并尝试删除/排除中型和大型设备之间的断点。我有一个现有网站，该网站已优化为970px，看起来不错。我想做的是删除md> lg断点，以便即使在大型宽屏台式机上，最大机身宽度也为970px且仍居中。

I'm using Bootstrap 3 and trying to remove/exclude the breakpoint between medium and large devices. I have a existing website which is optimised to 970px which looks great. What I am trying to do is remove the md > lg breakpoint so that even on large widescreen desktops the maximum body width is 970px and still centred.

任何人都知道是否存在一个快速解决方案吗？

Anyone know if there is a quickfix solution to this?

任何建议都会受到赞赏

Decbrad

推荐答案

如果您要覆盖引导程序断点（并正确使用容器），则将其添加到引导程序CSS文件中的引导程序断点媒体查询下面应该对您有用。

If you're overriding the bootstrap breakpoint (and using containers properly), adding this below the bootstrap breakpoint media queries in the bootstrap CSS file should work for you.

如果使用LESS

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

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

OR, you can simply override the bootstrap container in your own CSS (just make sure you load it after bootstrap.css)

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

或者您可以在引导程序中找到媒体查询。 css文件位于第1240行附近，只需在那里进行更改

OR you can find the media query in the bootstrap.css file on around line 1240 and simply change it there

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

这篇关于Bootstrap 3-删除md和lg之间的断点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！