Question

我的导航栏在窗口调整大小时会崩溃。除了通常的导航栏中的东西，联系...等，我有两个社交媒体链接（脸书和推特）。调整窗口大小后，两个社交媒体项目都会跳到折叠栏的右侧，并显示在折叠栏的“下拉列表”中。

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

我通过在折叠条形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/

谢谢！

RESULT

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

像这样：

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

}

Answer 1

将class="navbar-social"包裹在父class="collapse navbar-collapse"内，也没有理由使用<div class="navbar-social">，所以只需添加社交li项（{{1}父{4}}元素中的}} class ：

Updated JsFiddle

＆＃13;

navbar-social

＆＃13;

Answer 2

它与在页面上呈现元素的顺序有关。折叠的菜单正在被隐藏＆＃34;并将你的图标分流到位。

只需输入＆＃34; navbar-social＆＃34;在＆＃34; navbarForCollapse＆＃34;之前的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>

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

2 个答案: