小开

Bootstrap 不能很好地记录媒体查询。这些变量的 @screen-sm，@screen-md，@screen-lg实际上是指较少的变量，而不是简单的 CSS。

当您自定义 Bootstrap 时，您可以更改媒体查询断点，当它编译@screen-xx 时，变量被更改为您定义为 screen-xx 的任何像素宽度。这就是为什么像这样的框架可以编码一次，然后由最终用户自定义，以满足他们的需求。

这里有一个类似的问题，可能会提供更清晰的答案: Bootstrap 3.0媒体查询

在 CSS 中，您仍然必须使用传统的媒体查询来覆盖或添加 Bootstrap 正在执行的操作。

关于你的第二个问题，那不是打印错误。一旦屏幕低于768px，框架就会变得完全流畅，可以在任何设备宽度下调整大小，不再需要断点。480px 的断点之所以存在，是因为移动优化的布局发生了特定的变化。

要看到这个实际效果，请访问他们网站上的这个示例(http://getbootstrap.com/examples/navbar-fixed-top/) ，并调整窗口大小，看看768px 之后的设计是如何处理的。

小开

对480px 的引用已被删除，取而代之的是:

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

在 Bootstrap 3中没有低于768px 的断点。

如果您想使用 @screen-sm-min和其他混合，那么您需要使用 LESS 进行编译，请参阅 http://getbootstrap.com/css/#grid-less

这里有一个关于如何使用 Bootstrap 3和 LESS 的教程: http://www.helloerik.com/bootstrap-3-less-workflow-tutorial

小开

这个问题已经在一篇 https://github.com/twbs/bootstrap/issues/10203中讨论过了到目前为止，由于兼容性原因，还没有更改 Grid 的计划。

您可以从这个分支获得 Bootstrap，分支 hs: https://github.com/antespi/bootstrap/tree/hs

这个分支给你一个额外的480px 的断点，所以你必须:

移动优先设计(XS，小于480px)
在 HTML 中添加 HS (水平小型设备)类: colhs-* 、 visible-HS，... 和水平移动设备的设计(HS，小于768px)
片剂设备的设计(SM，小于992px)
桌面设备设计(MD，小于1200px)
设计大型设备(LG，超过1200px)

首先设计手机是理解 Bootstrap 3的关键。这是 BootStrap2.x 的主要变化。作为一个规则模板，您可以遵循以下内容(如下所示) :

.template {
/* rules for mobile vertical (< 480) */


@media (min-width: @screen-hs-min) {
/* rules for mobile horizontal (480 > 768)  */
}
@media (min-width: @screen-sm-min) {
/* rules for tablet (768 > 992) */
}
@media (min-width: @screen-md-min) {
/* rules for desktop (992 > 1200) */
}
@media (min-width: @screen-lg-min) {
/* rules for large (> 1200) */
}
}

小开

引导5个媒体查询和断点

// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap


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


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


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


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


// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }

最小宽度

// Source mixins


// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }`
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }
@include media-breakpoint-up(xxl) { ... }


// Usage


// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
.custom-class {
display: none;
}
@include media-breakpoint-up(sm) {
.custom-class {
display: block;
}
}

最大宽度

// No media query necessary for xs breakpoint as it's effectively `@media (max-width: 0) { ... }`
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
@include media-breakpoint-down(xl) { ... }
@include media-breakpoint-down(xxl) { ... }


// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
.custom-class {
display: block;
}
}

Bootstrap 4媒体查询和断点

// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap


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


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


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


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

Bootstrap 4提供了 Sass 中的 CSS 源代码，你可以通过 Sass Mixins 包括它们:

@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }


// Example usage:
@include media-breakpoint-up(sm) {
.some-class {
display: block;
}
}

Bootstrap 3媒体查询和断点

/*==========  Mobile First Method  ==========*/


/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {
    

}


/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {


}


/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {


}


/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {


}


/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {


}






/*==========  Non-Mobile First Method  ==========*/


/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {


}


/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {


}


/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {


}


/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {


}


/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {
    

}

Bootstrap 2.3.2媒体查询和断点

@media only screen and (max-width : 1200px) {


}


@media only screen and (max-width : 979px) {


}


@media only screen and (max-width : 767px) {


}


@media only screen and (max-width : 480px) {


}


@media only screen and (max-width : 320px) {


}

资源:

Bootstrap 5.2 : < a href = “ https://getbootstrap.com/docs/5.2/outs/breakpoints/”rel = “ nofollow noReferrer”> https://getbootstrap.com/docs/5.2/layout/breakpoints/
Bootstrap 4.6 : < a href = “ https://getbootstrap.com/docs/4.6/layo/view/# response-breakpoints”rel = “ nofollow noReferrer”> https://getbootstrap.com/docs/4.6/layout/overview/#responsive-breakpoints
Bootstrap 3.4 : < a href = “ https://getbootstrap.com/docs/3.4/css/# grid-media-query”rel = “ nofollow noReferrer”> https://getbootstrap.com/docs/3.4/css/#grid-media-queries
Bootstrap 2.3.2 : < a href = “ https://getbootstrap.com/2.3.2/scripolding.html # response”rel = “ nofollow noReferrer”> https://getbootstrap.com/2.3.2/scaffolding.html#responsive

小开

我知道这有点老了，但我想我会有所贡献的。根据@Sopy 给出的答案，我添加了一个. xxs 断点。我还没有处理可见的-内联的、 table.visible 等类。

/*==========  Mobile First Method  ==========*/


.col-xxs-12, .col-xxs-11, .col-xxs-10, .col-xxs-9, .col-xxs-8, .col-xxs-7, .col-xxs-6, .col-xxs-5, .col-xxs-4, .col-xxs-3, .col-xxs-2, .col-xxs-1 {
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
float: left;
}


.visible-xxs {
display:none !important;
}


/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) and (max-width:479px) {


.visible-xxs {
display: block !important;
}
.visible-xs {
display:none !important;
}


.hidden-xs {
display:block !important;
}


.hidden-xxs {
display:none !important;
}


.col-xxs-12 {
width: 100%;
}
.col-xxs-11 {
width: 91.66666667%;
}
.col-xxs-10 {
width: 83.33333333%;
}
.col-xxs-9 {
width: 75%;
}
.col-xxs-8 {
width: 66.66666667%;
}
.col-xxs-7 {
width: 58.33333333%;
}
.col-xxs-6 {
width: 50%;
}
.col-xxs-5 {
width: 41.66666667%;
}
.col-xxs-4 {
width: 33.33333333%;
}
.col-xxs-3 {
width: 25%;
}
.col-xxs-2 {
width: 16.66666667%;
}
.col-xxs-1 {
width: 8.33333333%;
}
.col-xxs-pull-12 {
right: 100%;
}
.col-xxs-pull-11 {
right: 91.66666667%;
}
.col-xxs-pull-10 {
right: 83.33333333%;
}
.col-xxs-pull-9 {
right: 75%;
}
.col-xxs-pull-8 {
right: 66.66666667%;
}
.col-xxs-pull-7 {
right: 58.33333333%;
}
.col-xxs-pull-6 {
right: 50%;
}
.col-xxs-pull-5 {
right: 41.66666667%;
}
.col-xxs-pull-4 {
right: 33.33333333%;
}
.col-xxs-pull-3 {
right: 25%;
}
.col-xxs-pull-2 {
right: 16.66666667%;
}
.col-xxs-pull-1 {
right: 8.33333333%;
}
.col-xxs-pull-0 {
right: auto;
}
.col-xxs-push-12 {
left: 100%;
}
.col-xxs-push-11 {
left: 91.66666667%;
}
.col-xxs-push-10 {
left: 83.33333333%;
}
.col-xxs-push-9 {
left: 75%;
}
.col-xxs-push-8 {
left: 66.66666667%;
}
.col-xxs-push-7 {
left: 58.33333333%;
}
.col-xxs-push-6 {
left: 50%;
}
.col-xxs-push-5 {
left: 41.66666667%;
}
.col-xxs-push-4 {
left: 33.33333333%;
}
.col-xxs-push-3 {
left: 25%;
}
.col-xxs-push-2 {
left: 16.66666667%;
}
.col-xxs-push-1 {
left: 8.33333333%;
}
.col-xxs-push-0 {
left: auto;
}
.col-xxs-offset-12 {
margin-left: 100%;
}
.col-xxs-offset-11 {
margin-left: 91.66666667%;
}
.col-xxs-offset-10 {
margin-left: 83.33333333%;
}
.col-xxs-offset-9 {
margin-left: 75%;
}
.col-xxs-offset-8 {
margin-left: 66.66666667%;
}
.col-xxs-offset-7 {
margin-left: 58.33333333%;
}
.col-xxs-offset-6 {
margin-left: 50%;
}
.col-xxs-offset-5 {
margin-left: 41.66666667%;
}
.col-xxs-offset-4 {
margin-left: 33.33333333%;
}
.col-xxs-offset-3 {
margin-left: 25%;
}
.col-xxs-offset-2 {
margin-left: 16.66666667%;
}
.col-xxs-offset-1 {
margin-left: 8.33333333%;
}
.col-xxs-offset-0 {
margin-left: 0%;
}


}


/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {


.visible-xs {
display:block !important;
}


}


/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {


.visible-xs {
display:none !important;
}


}


/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {


}


/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {


}

小开

@media screen and (max-width: 767px) {


}


@media screen and (min-width: 768px) and (max-width: 991px){




}


@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape){




}


@media screen and (min-width: 992px) {






}

小开

如果使用 http://lesscss.org/构建 CSS，那么应该能够使用这些断点。

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */


/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) {  }


/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) {  }


/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) {  }

来自 https://getbootstrap.com/docs/3.4/css/#grid-media-queries

实际上，@screen-sm-min是一个变量，当使用 Less 构建时，它会被 _variable中指定的值替换。如果你不使用 Less，你可以将这个变量替换为:

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */


/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {  }


/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {  }


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

Bootstrap 3官方支持 Sass: https://github.com/twbs/bootstrap-sass。如果你正在使用 Sass (你应该)语法有点不同。

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */


/* Small devices (tablets, 768px and up) */
@media (min-width: $screen-sm-min) { }


/* Medium devices (desktops, 992px and up) */
@media (min-width: $screen-md-min) {  }


/* Large devices (large desktops, 1200px and up) */
@media (min-width: $screen-lg-min) {  }

小开

下面是 Bootstrap 4中使用的选择器。在 BS4中没有“最低”设置，因为“额外小”是默认设置。也就是说，您首先编码 XS 的大小，然后再重写这些媒体。

@media(min-width:576px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}

小开

对于 bootstrap 3，我的导航栏组件中有以下代码

/**
* Navbar styling.
*/
@mobile:          ~"screen and (max-width: @{screen-xs-max})";
@tablet:          ~"screen and (min-width: @{screen-sm-min})";
@normal:          ~"screen and (min-width: @{screen-md-min})";
@wide:            ~"screen and (min-width: @{screen-lg-min})";
@grid-breakpoint: ~"screen and (min-width: @{grid-float-breakpoint})";

然后你可以用

@media wide { selector: style }

这将使用您将变量设置为的任何值。

转义允许您使用任意字符串作为属性或变量值。在 ~ “ Anything”或 ~ “ Anything”中的任何内容都被使用，除了插值之外没有任何改变。

Http://lesscss.org

小开

为了在依赖于旧版本的 Bootstrap 的项目中并行使用 Bootstrap 4的 Mixin，您可以尝试使用化名通过 npm同时安装这两个引导程序:

npm i bootstrap-3@npm:bootstrap-sass@\^3 bootstrap-4@npm:bootstrap@\^4 bootstrap-5@npm:bootstrap@\^5 bootstrap

注意 : 此命令安装版本3、4、5以及最新版本。如果3和4只是需要适应！由于空间的原因，我通过 symlink 使用 node _ module，并且我需要跨项目的所有这些模块: -)

然后得到你需要的部分:

// Bootstrap 3
@import '../../../node_modules/bootstrap-3/assets/stylesheets/_bootstrap.scss';


// Extend: Bootstrap 4 Media Queries
@import "../../../node_modules/bootstrap-4/scss/_functions.scss";
@import "../../../node_modules/bootstrap-4/scss/_variables.scss";
@import '../../../node_modules/bootstrap-4/scss/mixins/_breakpoints.scss';

当然要调整路线！

如果有什么有用的，你现在可以使用:

@include media-breakpoint-up(sm) {}

在启动3中。

否则，就用搜索/替换 px 替换混合文件。

小开

引导4媒体查询附带示例

@media (min-width: 576px) {
.responsive{
color:red
}
}


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


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


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

<h2>Bootstrao 4 </h2>
<div class="responsive"> see colour herer</div>