Question

＆＃13;

.navbar-brand {
  padding: 0px;
}

.navbar-brand>img {
  height: 100%;
  padding: 15px;
  width: auto;
}

.example6 .navbar-brand{ 
  background: url(<!-- # -->) center / contain no-repeat;
  width: 200px;
}

enter image description here

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-inverse navbar-fixed-top example6">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar6">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand text-hide" href="/fedhr/Fed_Splash_New.do">
        </a>
      </div>
      <div id="navbar6" class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="/fedhr/Fed_Splash_New.do"><span class="glyphicon glyphicon-home"></span></a></li>

          <li><a href="#Profile"><span class="glyphicon glyphicon-user"></span> <g:no_escape>${jvar_user_name}</g:no_escape> <g:no_escape>${jvar_user_lastname}</g:no_escape></a></li>
          <li><a href="#Tasks"><span class="glyphicon glyphicon-list-alt"></span> Tasks</a></li>
          <li><a href="#About"><span class="glyphicon glyphicon-plane"></span> About Us</a></li>
          <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><span class="glyphicon glyphicon-phone-alt"></span> Contact Us <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
              <li><a href="mailto:someone@example.com?Subject=Hello%20again">Email Us</a></li>
              <li><a href="/$chat_support.do?queueID=cd846e1747a102009eaff6df1d9a7175" target="_blank">Chat with HR</a></li>
            </ul>
          </li>
            <li><a href="../logout.do"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li>

        </ul>
      </div>
     </div>
  </nav>

＆＃13;

我有一个自举固定导航栏，由于某种原因延伸到滚动条。奇怪的是我在几个页面上使用这个确切的代码，它只延伸到这个特定页面上的滚动条。有什么想法会发生这种情况吗？

Answer 1

我认为你需要在“.container”之后添加一个带有“.row”类的元素，如果看起来here

twitter bootstrap navbar扩展到滚动条

1 个答案: