时间戳

首页 > 解决方案 > Bootstrap navbar社交媒体图标手机版

jquery - Bootstrap navbar社交媒体图标手机版

问题描述

我使用引导程序构建了一个导航面板。我的网站的移动版本有问题。

这是 codepen 上的示例。

我试图重建它，但项目总是崩溃。

<nav class="navbar navbar-default navbar-fixed-top font">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>   
      </button>
      <a href="#up" class="navbar-brand">
    <img src="images/logo.jpg" alt="Logo" style="width:100px;">
      </a>
    </div>
    <div class="collapse navbar-collapse navbar-right" id="myNavbar">
      <ul class="nav navbar-nav">
        <li><a href="#about">O MNIE</a></li>
        <li><a href="#work">JAK PRACUJEMY</a></li>
        <li><a href="#portfolio">PROJEKTY</a></li>
        <li><a href="#contact">KONTAKT</a></li>
            <li class="nav-item"><a class="nav-link" href=""><i class="fab fa-facebook mr-1"></i></a></li>
            <li class="nav-item"><a class="nav-link" href=""><i class="fab fa-instagram"></i></a> </li>
        </ul>
  </div>
</div>

我解释效果的最简单方法是向您发送照片。

前：

1

后

2

3

标签： jqueryhtmlcssbootstrap-4

解决方案

您可以添加第二对社交媒体图标，然后使用 @media 规则手动隐藏特定宽度的元素。当你真正做的只是隐藏其中一个时，这会让它们看起来好像已经移动了。

这就是你的做法：

在您的导航栏品牌之后将其添加到 html 中：

<div class="collapse-social-icons">
  <a class="navbar-brand" href=""><i class="fab fa-facebook"></i></a>
  <a class="navbar-brand" href=""><i class="fab fa-instagram"></i></a>
</div>

以及要在小屏幕上隐藏的图标的类collapse-social-icons-dropdown 。像这样：

<li class="nav-item collapse-social-icons-dropdown"><a class="nav-link" href=""><i class="fab fa-facebook mr-1"></i></a></li>


然后我将它添加到 css 中：

/* This is to float the social incons to the right */
.collapse-social-icons {
  position: relative;
  float: right;
  margin-right: 10px;
}

/* This is to add the same hover-effect as the other menu items */
.collapse-social-icons a:hover {
  background-color: #000000 !important;
  color: #ffffff !important;
}

/* This is to hide the "new" set of icons on big screens */
@media only screen and (min-width: 767px) {
  .collapse-social-icons {
    display:none !important;
  } 
}

/* This is to hide the "old" set of icons on small screens */
@media only screen and (max-width: 767px) {
  .collapse-social-icons-dropdown {
    display:none !important;
  } 
}

当页面宽度小于 767px 时，css 中的 @media 规则适用。你可以随意修改它，如果你愿意，你也可以指定一个最大宽度。

在这里查看https://codepen.io/wenzzzel/pen/jXQVNv

推荐阅读