twitter-bootstrap 在 Bootstrap 4-alpha 中使用媒体断点

Using media breakpoints in Bootstrap 4-alpha

提问by Ivan Topi?

In Bootstrap 3 I use this:

在 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;
    }
}

How can I do the same thing in Boostrap 4-alpha? I can't find an example in their docs. This is in variables.scss

我如何在 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);

回答by Syden

Use breakpoint mixins like this:

像这样使用断点混合：

.something {
    padding: 5px;
    @include media-breakpoint-up(sm) { 
        padding: 20px;
    }
    @include media-breakpoint-up(md) { 
        padding: 40px;
    }
}

v4breakpoints reference

v4断点参考

v4 alpha6breakpoints reference

v4 alpha6断点参考

---

---

Below full options and values.

下面是完整的选项和值。

Breakpoint & up (toggle on value and above):

断点和向上（在值及以上切换）：

@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) { ... }

breakpoint & up values:

断点和向上值：

// 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) { ... }

breakpoint & down (toggle on value and down):

断点和向下（切换值和向下）：

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

breakpoint & down values:

断点和向下值：

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

// Small devices (landscape phones, less than 768px)
@media (max-width: 767px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199px) { ... }

// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width

breakpoint only:

仅断点：

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

breakpoint only values (toggle in between values only):

仅断点值（仅在值之间切换）：

// 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) { ... }

回答by Zim

I answered a similar question here

我在这里回答了一个类似的问题

As @Syden said, the mixins will work. Another option is using SASS map-getlike this..

正如@Syden 所说，mixin 将起作用。另一种选择是map-get像这样使用 SASS ..

@media (min-width: map-get($grid-breakpoints, sm)){
  .something {
    padding: 10px;
   }
}

@media (min-width: map-get($grid-breakpoints, md)){
  .something {
    padding: 20px;
   }
}

http://www.codeply.com/go/0TU586QNlV

http://www.codeply.com/go/0TU586QNlV

---

---

Bootstrap 4 Breakpoints demo

Bootstrap 4 断点演示

回答by itolima esther

Bootstrap has a way of using media queries to define the different task for different sites. It uses four breakpoints.

Bootstrap 有一种使用媒体查询来定义不同站点的不同任务的方法。它使用四个断点。

we have extra small screen sizes which are less than 576 pixels that small in which I mean it's size from 576 to 768 pixels.

我们有小于 576 像素的超小屏幕尺寸，我的意思是它的尺寸从 576 到 768 像素。

medium screen sizes take up screen size from 768 pixels up to 992 pixels large screen size from 992 pixels up to 1200 pixels.

中等屏幕尺寸占用屏幕尺寸从 768 像素到 992 像素大屏幕尺寸从 992 像素到 1200 像素。

E.g Small Text

例如小文本

This means that at the small screen between 576px and 768px, center the text For medium screen, change "sm" to "md" and same goes to large "lg"

这意味着在 576px 和 768px 之间的小屏幕上，将文本居中对于中等屏幕，将“sm”更改为“md”，大“lg”也是如此