Question

bootstrap 4.1中的断点是：

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

我要添加新

@media (min-width: 1600px) { ... }

但是，当我将css设置为1600px时，css无法正常工作，而css则从1200px开始。有人帮我解决这个问题吗？

Answer 1

您可以尝试这样设置最小宽度和最大宽度吗？

@media  only screen and (min-width:1200px) and (max-width:1600px) {
   div#zarada p {width:39% }
   }

您可以设置较小的尺寸，也可以检查设置尺寸的顺序。

更多信息和更多示例：media screen and max width

Answer 2

我建议您创建自己的custombootstratheme.sass并包含以下内容：

//overriding sass _varibles  :

$grid-breakpoints: (
  xs: 0,
  my: 300px, // !!!!!!!!!!!!!
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
);
@import "./../node_modules/bootstrap/scss/functions";
@import "./../node_modules/bootstrap/scss/variables";
@import "./../node_modules/bootstrap/scss/mixins";

https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss#L187-L193

然后在sass编译后，您应该拥有自己的所有col-my-6 mt-my-1等家族。引导工具

我想在Bootstrap 4.1中添加新的响应断点CSS

2 个答案: