没有社交媒体项目的导航栏崩溃

Question

我的导航栏在调整窗口大小时会折叠。除了导航栏中常见的东西，比如关于、联系...等，我还有两个社交媒体链接（facebook 和 twitter）。在我调整窗口大小后，两个社交媒体项目都会跳到折叠栏的右侧，并显示在折叠栏的“下拉菜单”中。

我希望社交媒体项目显示在所谓的下拉按钮的左侧，并且不显示在折叠栏中。

我已经尝试通过在折叠栏 div 之外采购它们来实现这一点，但没有任何变化。

有什么帮助吗？

<nav class="navbar navbar-expand-lg navbar fixed-top navbar-dark bg-dark">
    <div class="container">
        <a class="navbar-brand" href="#"><img src="img/logo.png" width="100" height="100" class="d-inline-block align-top" alt=""></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarForCollapse" aria-controls="navbarForCollapse" aria-expanded="false" aria-label="Toggle navigation">       
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarForCollapse">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Our team</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
            </ul>
        </div>
        <div class="navbar-social">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a href="#" class="fa fa-facebook mr-lg-2"></a>
                </li>
                <li class="nav-item">
                    <a href="#" class="fa fa-twitter"></a>
                </li>
            </ul> 
        </div>          
    </div>
</nav>

对于视觉：

https://jsfiddle.net/8ay2g0tL/3/

谢谢！

结果

我不确定这是否是最佳做法，但我最终能够将其从折叠的导航栏中隐藏的方法是将其设置为显示：无

像这样：

@media only screen and (max-width: 998px) {
#navbarfbtw{
display:none;
}    

}

Answer 1

只需将class="navbar-social" 包裹在父class="collapse navbar-collapse" 中，也没有理由使用<div class="navbar-social"> 所以只需添加社交li 项目（带有navbar-social 类）父ul 元素如下：

Updated JsFiddle

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<nav class="navbar navbar-expand-lg navbar fixed-top navbar-dark bg-dark">
   <div class="container">
      <a class="navbar-brand" href="#"><img src="img/logo.png" width="100" height="100" class="d-inline-block align-top" alt=""></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarForCollapse" aria-controls="navbarForCollapse" aria-expanded="false" aria-label="Toggle navigation">       
      <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarForCollapse">
         <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
               <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
               <a class="nav-link" href="#">About</a>
            </li>
            <li class="nav-item">
               <a class="nav-link" href="#">Our team</a>
            </li>
            <li class="nav-item">
               <a class="nav-link" href="#">Contact</a>
            </li>
            <li class="nav-item navbar-social">
               <a href="#" class="fa fa-facebook mr-lg-2"></a>
            </li>
            <li class="nav-item navbar-social">
               <a href="#" class="fa fa-twitter"></a>
            </li>
         </ul>
      </div>
   </div>
</nav>

Answer 2

这与元素在页面上呈现的顺序有关。 折叠的菜单正在“取消隐藏”并将您的图标分流。

只需将“navbar-social”div 放在“navbarForCollapse”div 之前。

https://jsfiddle.net/16x8jhu4/9/

<div class="navbar-social">
  <ul class="navbar-nav ml-auto">
    <li class="nav-item">
      <a href="#" class="fa fa-facebook mr-lg-2"></a>
    </li>
    <li class="nav-item">
      <a href="#" class="fa fa-twitter"></a>
    </li>
  </ul>
</div>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarForCollapse" aria-controls="navbarForCollapse" aria-expanded="false" aria-label="Toggle navigation">       
  <span class="navbar-toggler-icon"></span>
</button>


<div class="collapse navbar-collapse" id="navbarForCollapse">
  <ul class="navbar-nav ml-auto">
    <li class="nav-item active">
      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Our team</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Contact</a>
    </li>
  </ul>
</div>