Bootstrapmail Gmail-mobile-webapp 不支持 `display: none`
我使用 bootstrapmail 来制作电子邮件。但我在使用 Gmail 移动网络邮件时遇到问题。 用户图标不得显示在移动设备上。但这里它显示在标题中的徽标中。
它不响应：display: none;。当标头变小时，它还会忽略 bootstrap-email 的 col-lg 类。大家可以帮助我吗？
这是我的代码：
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
</style>
</head>
<body class="bg-gray-200">
<div class="container">
<!-- Header Begin -->
<div class="w-full p-4 bg-black">
<div class="row">
<div class="col-lg-10">
<!-- Logo of Voetbalshop.nl -->
<img class="h-12 ay-middle" src="#">
</div>
<div class="col-lg-2 ay-middle ax-right">
<!-- User Icon redirect to login page of Voetbalshop.nl when clicked on -->
<a class="no-underline" href="#">
<img class="w-7 d-none d-lg-inline ay-middle" src="#">
</a>
</div>
</div>
</div>
<!-- Header End -->
在下图中，您可以看到它现在的样子。
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
Gmail 移动网络邮件不支持
Display:none（但使用它的人比例极小 - 它不是 Gmail 移动应用程序）：https://www.caniemail.com/clients/gmail/#mobile-webmail它也不支持
您可以尝试添加自己的样式，例如
style="width:0;height:0;"（内联在图像上），然后添加自定义嵌入样式以在桌面中显示它，例如< ;style>@media screen 和 (min-width:600px) {img .d-none {width:50px!important;height:50px!important;} }。 （警告：有一些较少使用的桌面应用程序不支持Display:noneis not supported on Gmail Mobile Webmail (but that's an extremely tiny percentage of people who use that - it is not the Gmail Mobile Apps): https://www.caniemail.com/clients/gmail/#mobile-webmailIt also doesn't support
<style>blocks, along with Gmail IMAP (a type of Gmail account used a lot more): https://www.caniemail.com/features/html-style/. So since Bootstrap Email relies on @media queries in the<style>block for responsive behaviour, you won't be able to get responsive classes working in these clients (basically every other mobile client supports it).You could try adding your own styles like
style="width:0;height:0;"(inline on the image) and then adding a custom embedded style to show it in desktops like<style>@media screen and (min-width:600px) {img .d-none {width:50px!important;height:50px!important;} }</style>. (Caveat: there are a couple of less-used desktop applications that don't support the<style>block, and you'll have to do something about Outlook, but you can use their conditional block for that)