Bootstrap导航栏崩溃

时间:2017-07-18 00:17:51

标签: html css twitter-bootstrap

我目前正在使用bootstrap的导航栏,以便在屏幕变小时折叠元素。当屏幕变小时,有两个div会崩溃,但在它们崩溃之前,元素会相互堆叠。

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

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

我想在这里做的是在半屏导航链接之前折叠右边的社交媒体图标,但使用bootstrap的“hidden-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;
}

2 个答案:

答案 0 :(得分:0)

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

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

我创造了一个工作小提琴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是一样的。

答案 1 :(得分:0)

我解决了。

解决方案:

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