使用引导程序在移动窗口上设置断点

Question

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

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

Answer 1

我不建议这种黑客攻击，而是使用 @media 查询来实现您的目标。hi只是为了表明它是否有效@media only screen and (max-width: 568px) {&nbsp; .show-when-small-window {&nbsp; &nbsp; display: none;&nbsp; }}<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>更多信息：https ://getbootstrap.com/docs/4.4/utilities/display/

Answer 2

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

Answer 3

使用 Bootstrap-4scss.show-when-small-window{&nbsp; &nbsp; display: none;&nbsp; &nbsp; @include media-breakpoint-down(xs){&nbsp; &nbsp; &nbsp; &nbsp; display: inline;&nbsp; &nbsp; }}纯CSS.show-when-small-window{&nbsp; &nbsp; display: none;}@media (max-width: 575.98px){&nbsp; &nbsp; .show-when-small-window{&nbsp; &nbsp; &nbsp; &nbsp; display: inline;&nbsp; &nbsp; }}使用 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。