<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<title></title>
<link rel="stylesheet" href="css/bootstrap.css"/>
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<style>
nav ul li a{
font-size:14px;
}
.my-ml{
margin-left: 16rem !important;
}
@media screen and (min-width:576px) and (max-width:992px){
.hidden-sm{
display:none;
}
}
@media screen and (max-width:576px){
.about-hidden-sm{
margin-left: 0 !important;
}
}
</style>
</head>
<body>
<div class="">
<nav class="navbar navba-rexpand-sm bg-dark navbar-dark">
<!--
navbar-brand默认是放文字的，如：
也可以放图片，但必须是小图片：
-->
<a href="#" class="navbar-brand">Bootstrap中文网</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#cNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="cNavbar">
<ul class="navbar-nav">
<li class="nav-item hidden-sm"><a href="#" class="nav-link">Bootstrap3中文文档</a></li>
<li class="nav-item hidden-sm"><a href="#" class="nav-link ">Bootstrap4中文文档</a></li>
<li class="nav-item"><a href="#" class="nav-link">Less教程</a></li>
<li class="nav-item"><a href="#" class="nav-link">jQuery API</a></li>
<li class="nav-item"><a href="#" class="nav-link">网站实例</a></li>
<li class="nav-item my-ml hidden-sm about-hidden-sm"><a href="#" class="nav-link">关于</a></li>
</ul>
</div>
</nav>
</div>
<br/><br/><br/><br/><br/><br/>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
