在Bootstrap 3中,我使用以下代码:
.something {
padding: 5px;
@media screen and (min-width: $screen-sm-min) {
padding: 20px;
}
@media screen and (min-width: $screen-md-min) {
padding: 40px;
}
}
我怎么能在Boostrap 4-alpha中做同样的事情呢?我在他们的文档中找不到一个例子。这是在variables.scss中
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
) !default;
@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
@include _assert-starts-at-zero($grid-breakpoints);
4条答案
按热度按时间u1ehiz5o1#
更新: Bootstrap 5。
v5 breakpoints reference
**原始答案- Bootstrap v4:**使用如下断点混合:
v4断点引用
v4 alpha 6断点引用
在完整选项和值之下。
向上断点(在值及更高值上切换)(& U):
断点向上值(& U):
断点向下(打开值并向下切换)(& D):
断点向下值(& D):
仅断点:
仅断点值(仅在值之间切换):
bvuwiixz2#
我回答了similar question here
正如@Syden所说,mixins将起作用。另一种选择是像这样使用SASS
map-get
。http://www.codeply.com/go/0TU586QNlV
Bootstrap 4 Breakpoints demo
iyzzxitl3#
除了上述内容之外,如果您希望在模块级样式表中使用 Bootstrap 媒体断点(例如在create-react-app组件中),默认情况下,它们将是未定义的,您需要将mixin及其依赖项分别导入每个模块。
您可以在每个文件的顶部导入它们:
或者,您可以在scss文件夹中创建一个_mixins.scss文件,其中包含上面的行,然后将该文件导入到模块中。
nfeuvbwi4#
Bootstrap有一种使用媒体查询的方法来为不同的站点定义不同的任务。它使用了四个断点。
我们有小于576像素的超小屏幕,我的意思是它的大小从576到768像素。
中等屏幕尺寸屏幕尺寸从768像素到992像素大屏幕尺寸从992像素到1200像素。
例如,小文本
这意味着在576px和768px之间的小屏幕上,将文本居中。对于中屏幕,将“sm”更改为“md”,同样更改为大“lg”