我添加了从 W3school 获得的导航栏，但是当我将它添加到我的代码中时，导航栏太宽了，我不确定在哪里可以设置导航栏的宽度或高度。
我的 index.html:
<html>
<head>
<meta charset="utf-8">
<title>Tradeshift</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://www.w3schools.com/lib/w3.css" rel="stylesheet"/>
<script src="http://www.w3schools.com/lib/w3data.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</nav>
<!-- original img src https://ok2static.oktacdn.com/bc/image/fileStoreRecord?id=fs0d6gmquuO9LX87h0x7 -->
<div class="jumbotron text-center "> <!--jumbotron is displayed as a grey box with rounded corners. It also enlarges the font sizes of the text inside it.-->
<h1> <img src="https://ok2static.oktacdn.com/bc/image/fileStoreRecord?id=fs0d6gmquuO9LX87h0x7" alt="nothing" border="0">
<p class="lead">Built on JS/CSS</p><h1>
<p class="lead"> AJX v1.031018</p>
</div>
<body>
<fieldset>
<div class="text-center">
<legend>Sign in</legend>
<div>
<!-- <label for="userName">Username:</label> -->
<input type="text" id="username" name="username"
required placeholder ="Username"/>
</div>
<div>
<!-- <label for="password">Password:</label> -->
<input type="password" id="password" name="password"
minlength="8" required
placeholder="Password" />
</div>
<div>
<form action ="main.html">
<input type="submit" value="Sign in">
<div id="button"><a href="register">Register</a></div>
<!-- <input type="submit" value ="Register" a href ="register"></a> -->
<!-- <form action="register">
<input type="submit" value="Register">
</form> -->
</form>
</div>
</fieldset>
</div>
<script>
w3IncludeHTML();
</script>
</body>
</html>
最佳答案
您遇到此问题的原因是您同时使用了 Bootstrap 3 和 Bootstrap 4。
由于您使用的元素是 Bootstrap 3 的元素，删除 Bootstrap 4 的链接会对您有所帮助。
这是删除了 Bootstrap 4 的代码。
<html>
<head>
<meta charset="utf-8">
<title>Tradeshift</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://www.w3schools.com/lib/w3.css" rel="stylesheet"/>
<script src="http://www.w3schools.com/lib/w3data.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</nav>
<!-- original img src https://ok2static.oktacdn.com/bc/image/fileStoreRecord?id=fs0d6gmquuO9LX87h0x7 -->
<div class="jumbotron text-center "> <!--jumbotron is displayed as a grey box with rounded corners. It also enlarges the font sizes of the text inside it.-->
<h1> <img src="https://ok2static.oktacdn.com/bc/image/fileStoreRecord?id=fs0d6gmquuO9LX87h0x7" alt="nothing" border="0">
<p class="lead">Built on JS/CSS</p><h1>
<p class="lead"> AJX v1.031018</p>
</div>
<body>
<fieldset>
<div class="text-center">
<legend>Sign in</legend>
<div>
<!-- <label for="userName">Username:</label> -->
<input type="text" id="username" name="username"
required placeholder ="Username"/>
</div>
<div>
<!-- <label for="password">Password:</label> -->
<input type="password" id="password" name="password"
minlength="8" required
placeholder="Password" />
</div>
<div>
<form action ="main.html">
<input type="submit" value="Sign in">
<div id="button"><a href="register">Register</a></div>
<!-- <input type="submit" value ="Register" a href ="register"></a> -->
<!-- <form action="register">
<input type="submit" value="Register">
</form> -->
</form>
</div>
</fieldset>
</div>
<script>
w3IncludeHTML();
</script>
</body>
</html>关于javascript - 导航栏太宽，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52697279/