html - Bootstrap 4 导航栏品牌 - 是否可以在较小的断点处使用不同的 Logo ?

标签 html css bootstrap-4

我有以下标题 Logo ,在中号和大号屏幕上看起来不错,但不适合小屏幕:

enter image description here

我不能使用响应式图片,因为假设我正在阅读 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/

相关文章:

html - 如何控制双击选择的文本量?

twitter-bootstrap - Bootstrap 4无法将col拉到右边

css - 使用组件作为内容自定义 ng-bootstrap 模态

html - 简单地将文本包装在按钮中,但宽度最小化,没有不必要的空白

css - 如何禁用 html5 canvas 元素的选择

php - 如何将php文件转换成pdf文件

css - 如何将div的高度自动调整为与浏览器窗口相同

html - 将多个 div 与 "align-items"对齐

javascript - 我无法在我的 React 应用程序中修改我的 SVG 组件

jquery - Bootstrap Collapse 复杂行为