Question

我遇到这个奇怪的问题，其中Boostrap 3.3.6 CSS只是部分工作。虽然我认为该网站已经正确构建（正确的类在正确的位置等），但看起来有些CSS根本不存在。

这就是我的导航栏的样子：

这是我的页面代码。 CSS和JS的链接确实有效，我也没有做任何改动。这是从Bootstrap站点直接下载的。

如果我用指向MaxCDN的CSS文件的链接替换我的服务器端CSS的链接，问题仍然存在。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="/style/css/bootstrap.css">
  <link rel="stylesheet" href="/style/css/bootstrap-theme.css">

  <title>Test Page</title>
</head>

<body>
  <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">Test Page</a>
        <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
      <div id="navbar" class="collapse navbar-collapse">
        <ul class="navbar navbar-nav navbar-left">
          <li><a href="#">Home</a>
          </li>
          <li><a href="">Link</a>
          </li>
          <li class="dropdown">
            <a class="dropdown-toggle nolink-pointer" data-toggle="dropdown">Dropdown 1 <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="">Link</a>
              </li>
            </ul>
          </li>
          <li class="dropdown">
            <a class="dropdown-toggle nolink-pointer" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="">Link</a>
              </li>
            </ul>
          </li>
          <li class="dropdown">
            <a class="dropdown-toggle nolink-pointer" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="">Link</a>
              </li>
            </ul>
          </li>
          <li class="dropdown">
            <a class="dropdown-toggle nolink-pointer" data-toggle="dropdown">Dropdown 4 <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="">Link</a>
              </li>
            </ul>
          </li>
          <li><a href="">Link</a>
          </li>
          <li><a href="">Link</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <div class="container">
    <p>Test</p>
  </div>
  <footer class="footer">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script type="text/javascript" src="/style/js/bootstrap.min.js"></script>
  </footer>
</body>

</html>

Answer 1

您在

中错过了班级导航

 <ul class="navbar navbar-nav navbar-left">

您应该使用导航而不是导航栏。适当的是：

 <ul class="nav navbar-nav navbar-left">

Answer 2

<ul class="navbar navbar-nav navbar-left">内有nav，navbar，而ul内<ul class="nav navbar-nav navbar-left">。见Navbar。 footer

*请注意，因为您有这么多链接，所以您会看到它们在992px以下溢出。

旁注：考虑将您的脚本放在结束体标记之前，而不是放在<footer class="footer"> </footer> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script type="text/javascript" src="/style/js/bootstrap.min.js"></script> </body>标记内。

<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.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Test Page</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav navbar-left">
        <li><a href="#">Home</a>
        </li>
        <li><a href="">Link</a>
        </li>
        <li class="dropdown">
          <a class="dropdown-toggle nolink-pointer" data-toggle="dropdown">Dropdown 1 <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="">Link</a>
            </li>
          </ul>
        </li>
        <li class="dropdown">
          <a class="dropdown-toggle nolink-pointer" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="">Link</a>
            </li>
          </ul>
        </li>
        <li class="dropdown">
          <a class="dropdown-toggle nolink-pointer" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="">Link</a>
            </li>
          </ul>
        </li>
        <li class="dropdown">
          <a class="dropdown-toggle nolink-pointer" data-toggle="dropdown">Dropdown 4 <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="">Link</a>
            </li>
          </ul>
        </li>
        <li><a href="">Link</a>
        </li>
        <li><a href="">Link</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
<div class="container">
  <p>Test</p>
</div>

请参阅FullPage上的工作示例。

＆＃13;

http://localhost:3000

＆＃13;

Answer 3

你可以包括外部CSS，即customstyle.css：

创建并将customstyle.css上传到路径并设置您要显示的输出样式，例如：

ul.navbar-nav { padding: 20px 0; font-size: 12pt; color:#fff; }
ul.navbar-nav li { padding: 5px 20px; }
ul.navbar-nav li:hover { background:#fff; }

：D

Bootstrap navbar CSS仅部分工作

3 个答案: