如何在小窗口（例如xs）中查看HTML內容時添加斷點？<br class="show-when-small-window">
3 回答
肥皂起泡泡
TA貢獻1829條經驗 獲得超6個贊
我不建議這種黑客攻擊，而是使用 @media 查詢來實現(xiàn)您的目標。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>
更多信息：https ://getbootstrap.com/docs/4.4/utilities/display/
慕神8447489
TA貢獻1780條經驗 獲得超1個贊
要僅在給定的屏幕尺寸間隔上顯示元素，您可以將一個 .d- -none 類與 .d- -* 類組合，例如 .d-none .d-md-block .d-xl-none 將隱藏所有屏幕尺寸的元素（中型和大型設備除外）。
慕桂英3389331
TA貢獻2036條經驗 獲得超8個贊
使用 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。
- 3 回答
- 0 關注
- 181 瀏覽
添加回答
舉報
0/150
提交
取消