我有这个东西在一般情况下， 但问题是我是一个新人，现在我学习如何使用 Bootstrap 创建 HTML 以“减少输入”
这是我刚遇到的情况，我用 UL Li 标签创建了自己的导航，我想要一个带有 Bootstrap 的响应式导航，最初认为它使用起来很简单bootstrap 通过从 bootstrap 和 toggle 输入 ID 响应，但它不是。
请有人告诉我我应该从哪里开始学习 bootstrap 和修改东西以及我的代码有什么问题，我认为将 bootstrap 加入我的代码很好
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.navigation {
text-align: center;
margin: 0;
margin-top: 15px;
}
.navigation-modified ul,
li,
ol {
margin: 0;
font: #000;
list-style: none;
display: inline-block;
}
.navigation-modified li {
border: 2px solid red;
min-width: 200px;
padding: 5px 30px;
}
.navigation-modified li:nth-child(n+2) {
margin-left: -2px;
}
.navigation-modified li:hover {
padding: 10px 40px;
margin-top: -15px;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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="css/main.css" />
<link rel="stylesheet" href="css/bootstrap.css" />
<title>Test2</title>
</head>
<body>
<header>
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<nav id="navbarCollapse" class="navigation navbar-collapse">
<ul class="navigation-modified">
<a href="#">
<li>Home</li>
</a>
<a href="#">
<li>Registration</li>
</a>
<a href="#">
<li>Tutorial</li>
</a>
<a href="#">
<li>Contact Us</li>
</a>
</ul>
</nav>
</header>
</body>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</html>注意:我没有放bootstrap CSS和JS，太长了。请使用 Bootstrap 在本地运行。
最佳答案
使用这个…………
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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="css/main.css" />
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css" />
<title>Test2</title>
<style>
body {
margin: 0;
padding: 0;
}
.navigation-modified
{
margin:0px;
padding:0px;
}
.navigation {
text-align: center;
margin: 0;
margin-top: 15px;
}
.navigation-modified ul,
li,
ol {
margin: 0;
font: #000;
list-style: none;
display: inline-block;
}
.navigation-modified li {
border: 2px solid red;
min-width: 200px;
padding: 5px 30px;
}
.navigation-modified li:nth-child(n+2) {
margin-left: -2px;
}
.navigation-modified li:hover {
padding: 10px 40px;
margin-top: -15px;
}
</style>
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="navigation-modified">
<a href="#">
<li>Home</li>
</a>
<a href="#">
<li>Registration</li>
</a>
<a href="#">
<li>Tutorial</li>
</a>
<a href="#">
<li>Contact Us</li>
</a>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header>
</body>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
</html>
关于javascript - Bootstrap 自定义 css 导航栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35124233/