前端商城项目第一天
导航条：
本来是想做一个右侧隐藏部分导航条，可以手动向左侧滑动
运用bootstrap 的col技术
1，发现设置col-xs-3时并不能一行排列四个
<!DOCTYPE html>
<!--商城的首页-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>商城</title>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<script
src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8="
crossorigin="anonymous">
</script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous">
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
<link href="css/index-shop.css">
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
</head>
<body>
<div class="navbar navbar-default ">
<ul class="nav nav-pills row">
<li class="active col-xs-3"><a href="#">首页</a> </li>
<li class="col-xs-3"><a href="#">服务包</a> </li>
<li class="col-xs-3"><a href="#">保健食品</a> </li>
<li class="col-xs-3"><a href="#">器械用品</a> </li>
<li class="col-xs-3"><a href="#">并发症</a> </li>
</ul>
</div>
</body>
</html>
效果如下：将ul li 修改为div以后问题解决：