Bootstrap Boot 带可根据屏幕大小切换导航栏徽标[复制]

5ktev3wc  于 2022-12-16  发布在  Bootstrap
关注(0)|答案(1)|浏览(123)

此问题在此处已有答案

How to show something only on a certain screen size in Bootstrap?(2个答案)
(9个答案)
上个月关门了。
我使用的是 Bootstrap 。
我的导航栏是这样的

<nav class="navbar fixed-top">
  <div class="navbar-brand-wrapper d-flex align-items-center justify-content-center">
    <a class="navbar-brand" href="/"><img src="mylogo.png" alt="TopLogo"></a>
  </div>
  <ul class="nav navbar-nav-right">
    <li class="nav-link"><a href="{% url 'index' %}">Top</a></li>
    <li class="nav-link"><a href="{% url 'dashboard' %}">Dashboard</a></li>
  
    <li class="nav-link">{{ user.email }}</li>
    <li class="nav-link"><a href="{% url 'logout' %}" type="button" class="btn btn-primary btn-sm">Logout</a></li>
  </ul>
</nav>

我想根据屏幕大小更改导航栏品牌中的徽标。

mylogo.png -> mylogosmall.png.

有可能吗?

klsxnrf1

klsxnrf11#

是的,可以通过添加两个图像和类来控制元素的可见性。根据您的Bootstrap版本,您可以在3.x中使用,例如:

<img src="mylogo.png" alt="TopLogo" class="hidden-xs">
<img src="mylogosmall.png" alt="TopLogo" class="visible-xs">

对于 Bootstrap 5.x,检查Hiding elements
https://getbootstrap.com/docs/5.0/utilities/display/

<img src="mylogo.png" alt="TopLogo" class="d-block d-sm-none">
<img src="mylogosmall.png" alt="TopLogo" class="d-none d-sm-block">

仅在xs上可见:.d-block .d-sm-none仅在xs上隐藏:.d-none .d-sm-block

相关问题