bootstrap 4类使导航品牌图像仅出现在媒体和媒体之后

Bootstrap 4是一个流行的前端开发框架，它提供了一套用于构建响应式和移动优先的网站和应用程序的工具和组件。在Bootstrap 4中，可以使用类来控制导航品牌图像的显示。

根据问题描述，我们需要使导航品牌图像仅在媒体查询和媒体之后显示。为了实现这一点，可以使用Bootstrap 4中的CSS类来控制导航品牌图像的可见性。

首先，我们需要在导航栏中添加一个包含品牌图像的元素，例如一个<img>标签。然后，我们可以使用Bootstrap 4的CSS类来控制该元素的可见性。

在Bootstrap 4中，可以使用以下类来控制元素的可见性：

• d-none：将元素隐藏，不显示在页面上。
• d-block：将元素显示为块级元素，使其在页面上占据一行。
• d-inline：将元素显示为内联元素，使其在页面上与其他元素在同一行显示。
• d-sm-none、d-md-none、d-lg-none、d-xl-none：根据不同的屏幕尺寸隐藏元素。

根据问题描述，我们需要使导航品牌图像仅在媒体查询和媒体之后显示。假设我们希望在小屏幕设备上隐藏导航品牌图像，可以使用以下代码：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="brand-image.png" class="d-none d-md-block" alt="Brand Image">
  </a>
  <!-- 其他导航内容 -->
</nav>

在上面的代码中，我们将导航品牌图像包装在一个<a>标签中，并将其添加到导航栏中。使用d-none类可以将图像隐藏，而使用d-md-block类可以在中等屏幕尺寸及以上显示图像。

这样，导航品牌图像将只在中等屏幕尺寸及以上显示，而在小屏幕设备上将被隐藏起来。

推荐的腾讯云相关产品：腾讯云服务器（CVM）和腾讯云对象存储（COS）。

• 腾讯云服务器（CVM）：提供可扩展的云服务器实例，适用于各种应用场景。了解更多信息，请访问：腾讯云服务器（CVM）产品介绍
• 腾讯云对象存储（COS）：提供安全、稳定、低成本的对象存储服务，适用于存储和管理大量非结构化数据。了解更多信息，请访问：腾讯云对象存储（COS）产品介绍