如何在Bootstrap中为媒体断点设置不同的宽度

Question

我对Bootstrap很新，所以请耐心等待。我正在尝试为我正在创建的内部Web应用程序设置CSS。我让它与默认的bootstrap.css完美配合。然而，默认的屏幕宽度并不是所需要的，因为它将被用于许多非常高分辨率的显示器（以及桌子和可能的电话）。

所以我要做的就是编译我自己的bootstrap.css，它有一些新的媒体中断值。

当前

xs = 480px
sm = 768px
md = 992px
lg = 1200px

我想要的是

xs = 480px
sm = 992px
md = 1200px
lg = 1600px

甚至更好

xs = 480px
sm = 768px
md = 992px
lg = 1200px
xl = 1600px

但是我不能让这个工作。我在模板中输入了所需的值，但它产生的css不能正确缩放，它不会在中小尺寸之间正确跳转。

干杯迈克

Answer 1

我也试过这个，并得到与你相同的结果......

似乎“Customizer”没有更新正确处理container宽度的三个媒体查询中的两个。

您应该在自定义文件中找到第695行，更新值后，它似乎按预期工作...

DEMO

@media (min-width: 768px) { /*Should be 992px*/
  .container {
    width: 970px;
  }
}
@media (min-width: 992px) { /*Should be 1200px*/
  .container {
    width: 1170px;
  }
}
@media (min-width: 1600px) {
  .container {
    width: 1570px;
  }
}

我还在github See Here上记录了这个问题。我们会看到他们说的话......

<强>更新

看起来这是一个已知问题，将在3.1版本中修复。 See Here