引导导航栏折叠

Question

我目前正在使用bootstrap的导航栏，以便在屏幕变小时折叠元素。有两个div应该在屏幕变小时折叠，但在它们折叠之前，元素会堆叠在一起。

半屏：http://imgur.com/8692UFO

小屏幕：http://imgur.com/MIrRvNH

我想在这里做的是在半屏导航链接之前将社交媒体图标折叠起来，但是使用bootstrap的“隐藏sm”似乎不起作用。我是bootstrap的新手，想要一些关于如何解决这个问题的建议。

我的HTML：

<!-- NAVIGATION BAR -->
<div class="navbar navbar-default navbar-static-top navbar-inverse">

  <div class="container">

    <!-- HOME BRAND -->
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img src="./newnewfoy.png">
      </a>
    </div>

    <!-- NAV LINKS -->
    <ul class="nav navbar-nav navbar-collapse collapse">
      <li class="nav-item">
        <a class="nav-link active" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Event</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Volunteer</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Sponsors</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Contact</a>
      </li>
    </ul>

    <!-- NAV MEDIA -->
    <div class="nav navbar-collapse collapse medialinks hidden-xs">
      <a id="YOUcon" class = "mediacon" href="#"></a>
      <a id="IGcon" class = "mediacon" href="#"></a>
      <a id="TWTcon" class = "mediacon" href="#"></a>
      <a id="FBcon"  class="mediacon" href="#"></a>
    </div>

  </div>

</div>

CSS：

.nav{
  height: 50px;
}

.mediacon{
  float: right;
}

.medialinks{
  float: right;
}

.navbar-brand{
  padding-top: 7px;
}

Answer 1

您必须在导航栏标题中添加一个按钮才能打开和关闭导航栏。

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

我创建了一个可用的fiddle https://jsfiddle.net/x32tf96L/

HTML

<div class="container-fluid">

  <!-- HOME BRAND -->
  <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 class="navbar-brand" href="#">
      <img src="./newnewfoy.png">
    </a>
  </div>

  <!-- NAV LINKS -->
  <ul class="navbar-collapse collapse" id="myNavbar">
    <li class="nav-item">
      <a class="nav-link active" href="#">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Event</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Volunteer</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Sponsors</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Contact</a>
    </li>
  </ul>

  <!-- NAV MEDIA -->
  <div class="nav navbar-collapse collapse medialinks hidden-xs">
    <a id="YOUcon" class = "mediacon" href="#"></a>
    <a id="IGcon" class = "mediacon" href="#"></a>
    <a id="TWTcon" class = "mediacon" href="#"></a>
    <a id="FBcon"  class="mediacon" href="#"></a>
  </div>

</div>

​

CSS是一样的。

Answer 2

我解决了。

解决方案：

<div class="container">

    <!-- BRAND, BUTTON -->
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img src="./newnewfoy.png">
      </a>
    </div>

    <!-- NAV LINKS -->
    <div>
      <ul class="nav navbar-collapse collapse navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Event</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Volunteer</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Sponsors</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Contact</a>
        </li>
      </ul>

      <div class="medialinks hidden-sm">
        <a id="YOUcon" class = "mediacon" href="www.google.com"></a>
        <a id="IGcon" class = "mediacon" href="www.google.com"></a>
        <a id="TWTcon" class = "mediacon" href="www.google.com"></a>
        <a id="FBcon"  class="mediacon" href="www.google.com"></a>
      </div>
    </div>
</div>