带有引导程序的移动窗口上的断点答案

【问题标题】：Breakpoint on mobile window with bootstrap带有引导程序的移动窗口上的断点
【发布时间】：2020-07-22 08:33:29
【问题描述】：

在小窗口（如xs）中查看HTML内容时如何添加断点？

<br class="show-when-small-window">

【问题讨论】：

使用@media 查询
能否详细说明或举个例子？

标签： html css twitter-bootstrap bootstrap-4 media-queries

【解决方案1】：

要仅在给定的屏幕尺寸间隔上显示元素，您可以将一个 .d--none 类与一个 .d--* 类结合起来，例如 .d-none .d- md-block .d-xl-none 将隐藏所有屏幕尺寸的元素，除了中型和大型设备。

Change the value of the display property with our responsive display utility classes.

【讨论】：

【解决方案2】：

使用 Bootstrap-4 scss

.show-when-small-window{
    display: none;
    @include media-breakpoint-down(xs){
        display: inline;
    }
}

纯 CSS

.show-when-small-window{
    display: none;
}
@media (max-width: 575.98px){
    .show-when-small-window{
        display: inline;
    }
}

使用 Bootstrap-4 实用程序

<br class="show-when-small-window d-inline d-sm-none" />
<!-- or -->
<br class="show-when-small-window d-inline d-md-none" />
<!-- or -->
<br class="show-when-small-window d-inline d-lg-none" />
<!-- or -->
<br class="show-when-small-window d-inline d-xl-none" />

注意：<br /> 显示将是 inline。

【讨论】：

是的，你可以在这里使用 SCSS，但是 CSS 的 OP 标签和使用 bootstrap mixins，你需要导入 SCSS 文件，所以请指定它，否则 mixin 不起作用

【解决方案3】：

我不建议使用这种技巧，而是使用@media 查询来实现您的目标。 hi 只是为了表明它的工作与否

@media only screen and (max-width: 568px) {
  .show-when-small-window {
    display: none;
  }
}

<span class="show-when-small-window">
hi <br>
</span>

引导

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<span class="d-none d-sm-block">
hi <br> hi
</span>

【讨论】：

难道没有内置方法代替我编写那个类吗？
如果你正在使用，引导比它的d-none d-sm-block
为什么要阻止？不是去掉吗？
d-none 意味着它在所有分辨率中都使用display: none，但是当您使用d-sm-block 意味着它在断点到达567px 并转换为display: block 时更改CSS 属性并转换为display: block