Question

这是我的完整代码。我也删除了我的css文件。但导航栏仍然显得垂直。我的引导版本是“Bootstrap v3.3.7”。

<!DOCTYPE HTML>
<html lang="en-us">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>::xxxxxxx ::</title>
<link href="../css/sample.css"  type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">  
<script type="text/javascript" src="js/bootstrap-filestyle.min.js"> </script>
</head>

<body>
<div class="container-fluid">
<div class="row" style="text-align:center"> 

<nav class="navbar navbar-default">
<div class="container-fluid">

<!-- your navbar here -->
<div id="navbar" class="navbar-collapse navbar-right collapse hover-effect">
<ul class="nav navbar-nav">
   <li><a href="#about">ABOUT</a></li>
   <li><a href="#services">SERVICES</a></li>
   <li><a href="#gallery">GALLERY</a></li>
   <li><a href="#plans">PLANS</a></li>
   <li><a href="#faq">FAQs</a></li>
   <li><a href="#contact">CONTACT</a></li>
</ul>
</div>
</div>
</nav>                 
</div>  
</div>    
<script src="../bootstrap/js/jquery.min.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

Answer 1

您的问题缺乏更多背景信息，至少您错过了导航栏包装器as noted in the documentation：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<nav class="navbar navbar-default">
  <div class="container-fluid">

    <!-- your navbar here -->
    <div id="navbar" class="navbar-collapse navbar-right collapse hover-effect">
      <ul class="nav navbar-nav">
        <li><a href="#about">ABOUT</a>
        </li>
        <li><a href="#services">SERVICES</a>
        </li>
        <li><a href="#gallery">GALLERY</a>
        </li>
        <li><a href="#plans">PLANS</a>
        </li>
        <li><a href="#faq">FAQs</a>
        </li>
        <li><a href="#team">TEAM</a>
        </li>
        <li><a href="#contact">CONTACT</a>
        </li>
      </ul>
    </div>

  </div>
</nav>

＆＃13;

您需要展开代码段才能看到您的菜单，因为您已将其向右浮动。

Bootstrap水平导航栏无法正常工作。显示为垂直

1 个答案: