bootstrap 手机 window 上的断点

Question

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

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

Answer 1

我不建议使用这种技巧，但可以使用@media 查询来实现您的目标。 hi 只是为了说明它是否有效

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

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

BOOTSTRAP

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

更多信息：https://getbootstrap.com/docs/4.4/utilities/display/

Answer 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" />

Note: <br /> display will be inline.

Answer 3

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

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

bootstrap 手机 window 上的断点

Breakpoint on mobile window with bootstrap

html

css

media-queries

twitter-bootstrap

bootstrap-4