Bootstrap.min.css导航崩溃

时间:2015-09-17 16:14:38

标签: html css twitter-bootstrap navbar

我目前正在制作一个关于bootstrap的项目..我很难搞清楚这个问题。 我有一个导航,我需要在1200px左右崩溃,但当我这样做时,链接溢出这样:

enter image description here

我不知道这背后的原因是什么。但是我使用bootstrap.min.css,我知道它在bootstrap.css中是不同的。任何人都可以帮我这个吗?

顺便说一句,这是我在导航中已经完成的内容的片段:



.navbar-default .navbar-header {
  float: none;
}
.navbar-default .navbar-left,
.navbar-default .navbar-right {
  float: none !important;
}
.navbar-default .navbar-toggle {
  display: block;
}
.navbar-default .navbar-collapse {
  border-top: 1px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.navbar-default.navbar-fixed-top {
  top: 0;
  border-width: 0 0 1px;
}
.navbar-default .navbar-collapse.collapse {
  display: none!important;
}
.navbar-default .navbar-nav {
  float: none!important;
  margin-top: 7.5px;
}
.navbar-default .navbar-nav>li {
  float: none;
}
.navbar-default .navbar-nav>li>a {
  padding-top: 10px;
  padding-bottom: 10px;
}
.navbar-default .collapse.in {
  display: block !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<header id="header">
  <nav id="main-menu" class="navbar navbar-default navbar-fixed-top" role="banner">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>

        </button>
        <div class="brand-pad"></div>
        <a class="navbar-brand" href="index.html">
          <img src="images/logo_white.png" alt="logo" width="210px" height="90px">
        </a>

      </div>
      <div class="collapse navbar-collapse navbar-right">
        <div id="socialicon" class="collapse navbar-collapse navbar-right">
          <ul class="navbar-rights ">
            <li class="icon-margin-left icon-margin-right">
              <a class="twitterBtn smGlobalBtn" href="http://twitter.com/"></a>
            </li>
            <li>
              <a class="facebookBtn smGlobalBtn" href="http://facebook.com/"></a>
            </li>
          </ul>
        </div>
        <br>
        <ul class="nav navbar-nav nav-pad">
          <li class="scroll active"><a href="#home">HOME</a>
          </li>
          <li class="scroll"><a href="#features">ABOUT</a>
          </li>
          <li class="scroll"><a class="services" href="#services">OUR SERVICES</a>
          </li>
          <li class="scroll"><a class="collection" href="#portfolio">OUR COLLECTION</a>
          </li>
          <li class="scroll"><a href="#about">BECOME A MEMBER</a>
          </li>
          <li class="scroll"><a href="#meet-team">OUR PARTNERS</a>
          </li>
          <li class="scroll"><a href="#pricing">CONTACT</a>
          </li>
        </ul>
      </div>
    </div>
    <!--/.container-->
  </nav>
  <!--/nav-->
</header>
<!--/header-->
&#13;
&#13;
&#13;

提前致谢..

0 个答案:

没有答案