我有以下标题 Logo ,在中号和大号屏幕上看起来不错,但不适合小屏幕:
我不能使用响应式图片,因为假设我正在阅读 the documentation正确地,Bootstrap 只是在保持高度不变的同时缩小了宽度。恐怕随着图像的宽度越来越受限,文本将变得难以阅读。
理想情况下,我会在中间断点处用较小的 Logo 替换此 Logo 。这可能吗?
最佳答案
也许不是最优雅但快速简单的:有两个品牌图像,使用 Bootstrap 实用程序显示类适本地隐藏和显示。
https://getbootstrap.com/docs/4.1/utilities/display/
例如(我假设您使用的是 .navbar-brand 但不管怎样,相同的技术都有效):
<a class="navbar-brand" href="#">
<img src="logo-small.jpg" alt="Logo small" class="d-lg-none">
<img src="logo-large.jpg" alt="Logo large" class="d-none d-lg-block">
</a>
这将在 xs、sm 和 md 尺寸上显示小 Logo ,在 lg 和 xl 上显示大 Logo 。
关于html - Bootstrap 4 导航栏品牌 - 是否可以在较小的断点处使用不同的 Logo ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53451774/