html - 带有引导程序的移动窗口上的断点

Question

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

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

标签： htmlcsstwitter-bootstrapbootstrap-4media-queries

Answer 1

使用 Bootstrap-4scss

.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.