Bootstrap导航栏社交媒体图标移动版本

Question

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

这是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>

对于我来说，解释效果的最简单方法是向您发送照片。

之前：

---

后

Answer 1

您可以添加第二对社交媒体图标，然后使用@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>

，然后将该类折叠到您要隐藏在小屏幕上的图标上。 像这样：

<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

Answer 2

似乎您可以将社交图标添加到与移动按钮相邻的另一个div内，并利用d-none d-md-block在移动设备中显示它们并将其隐藏在较大的视图中。 您还需要更新CSS以使用Bootstrap 4的CSS库。

 <div class="d-flex justify-content-between">      
    <div class="d-block d-md-none">
    <a class="nav-link" href=""><i class="fab fa-facebook mr-1"></i></a>
    <a class="nav-link" href=""><i class="fab fa-instagram"></i></a>
    </div>
    <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>

然后在常规导航中：

    <li class="nav-item d-none d-md-block"><a class="nav-link" href=""><i class="fab fa-facebook mr-1"></i></a></li>
    <li class="nav-item d-none d-md-block"><a class="nav-link" href=""><i class="fab fa-instagram"></i></a></li>