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>