Bootstrap 4折叠导航栏答案

【问题标题】：Bootstrap 4 Collapsed navbarBootstrap 4折叠导航栏
【发布时间】：2016-10-17 14:38:01
【问题描述】：

我正在尝试重新排列我用 Bootstrap 4 制作的折叠导航栏。现在看起来像这样：

有没有办法将社交媒体按钮对齐在一条线上，将“关于”进一步向下并去掉“项目”和“联系人”前面的空间？

到目前为止，这是我的代码：

<nav class="navbar navbar-fixed-top navbar-light bg-faded">
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2" aria-controls="exCollapsingNavbar2" aria-expanded="false" aria-label="Toggle navigation">
    &#9776;
</button>
<div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
    <a class="navbar-brand" href="#">Timo Springer</a>
    <ul class="nav navbar-nav m-x-auto" style="width: 300px;">
        <li class="nav-item">
            <a class="nav-link" href="#about">About</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#projects">Projects</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#contact">Contact</a>
        </li>
    </ul>
    <ul class="nav navbar-nav pull-md-right">
        <li class="nav-item">
            <a class="nav-link" href="https://www.facebook.com/timo.springer"><i class="fa fa-facebook" aria-hidden="true"></i></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="https://www.instagram.com/springertimo/?hl=en"><i class="fa fa-instagram" aria-hidden="true"></i></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="https://500px.com/timospringer"><i class="fa fa-500px" aria-hidden="true"></i></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="https://de.linkedin.com/in/timo-springer-372468129"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
        </li>

    </ul>
</div>

非常感谢！

提莫

【问题讨论】：

标签： html css twitter-bootstrap navbar bootstrap-4

【解决方案1】：

只需在媒体 css 的导航标签中添加clear:both

@media (max-width:767px){
  .nav.m-x-auto{
    clear:both;
    margin: 0 !important;
  }
  .nav.navbar-nav.pull-md-right li{
    float:left;   
  }
   .nav.navbar-nav.pull-md-right li + li{
      margin-left: 1rem;
   }
}

这里是Demo

【讨论】：

很高兴能帮到你:)

【解决方案2】：

我认为以下应该可行。

ul.nav.navbar-nav.m-x-auto {
float: none!important;
clear: both!important;
width: 100%!important;
}

ul.nav.navbar-nav.pull-md-right {
width: 100%!important;
clear: both!important;
float: none!important;
}

ul.nav.navbar-nav.pull-md-right > li {
width: 25%;
text-align: center;
display: inline-block!important;
}

【讨论】：

谢谢！当它崩溃时，这是有效的。它使我的导航栏在桌面模式下崩溃了。
你应该把上面的代码放在媒体查询中，比如@media only screen and (max-width: 991px)，如果折叠的菜单出现在 768px 以下，那么用 (max-width: 767px) 替换它。