请老师帮忙检查一下有无问题，不理解小屏幕显示为何要d-none d-md-block
来源：4-4 自由编程
一架小飞机
2020-09-26 11:11:07
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>4-4自由编程</title>
<link rel="stylesheet" href="../grid.css">
<style>
*{ margin:0;padding:0;box-sizing:border-box; }
li{ list-style:none; }
a{ text-decoration:none;color:black; }
img{ width:100%;height:100%;width:200px;height:100%; }
/* 设置统一高度 */
.outer{ width:100%;height:64px;border:1px solid #ccc;display:flex; }
/* 让最外层容器中的按钮 导航 logo容器高度都继承自最外层容器 */
.btn-container,
.nav-container,
.logo-container{
height:100%;
padding:0;
}
/* ul元素使用弹性布局 */
ul.nav-list{ display:flex; }
/* li元素设置左外边距以及行高 */
.nav-link{ margin-left:24px;line-height:64px;font-weight:bold; }
/* 图片居中对齐 */
.logo{ display:flex;justify-content:center;align-items:center; }
/* 小屏下显示的按钮 */
#btn{
background:red;
width:80px;
height:100%;
/* 设置圆角 */
border-radius:0 80px 0 0;
position:relative;
cursor:pointer;
}
/* 自定义按钮的样式 横杠 */
.btn-toggle{
/* 绝对定位 */
position:absolute;
top:30px;
left:15px;
width:20px;
height:5px;
background:white;
display:block;
}
/* 第二根横杠想对于第一根横杠距离10px */
.btn-toggle:nth-child(2){
margin-top:10px;
}
/* 下拉菜单 只在小屏下显示*/
.dropMenu{
width:100%;
/* 因为没有点击按钮时下拉菜单是不显示的所以高度为0 */
height:0px;
/* 溢出隐藏 高度为0则容器高度中没有任何东西只有边框，所以要把溢出隐藏相当于不显示*/
overflow:hidden;
border:1px solid #ccc;
/* 添加动画过渡 */
transition:all 1.5s;
}
.drop-item{
height:40px;
line-height:40px;
}
/* 下拉菜单的选中后样式 */
.dropMenu-extended{
width:100%;
/* 因为咱们的box-sizing设置为了border-box,所以边框的宽度也会计算在高度中所以加了两个像素 */
height:122px;
background-color:pink;
}
</style>
</head>
<body>
<div class="outer">
<!-- 按钮 小屏下才显示-->
<div class="btn-container d-block d-md-none col-sm-5">
<div id="btn">
<span class="btn-toggle"></span>
<span class="btn-toggle"></span>
</div>
</div>
<!-- 导航 除了小屏外都显示-->
<div class="nav-contaienr d-none d-md-block col-md-5">
<ul class="nav-list">
<li class="nav-item">
<a href="#" class="nav-link">首页</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">关于</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">商业合作</a>
</li>
</ul>
</div>
<!-- logo -->
<div class="logo-container col-7">
<a href="#" class="logo-item">
<img src="./img/logo.png" alt="" class="logo">
</a>
</div>
</div>
<!-- 下拉菜单 只在小屏幕下显示-->
<div class="dropMenu d-block d-md-none" id="drop">
<ul class="drop-list">
<li class="drop-item">
<a href="#" class="drop-link">首页</a>
</li>
<li class="drop-item">
<a href="#" class="drop-link">关于</a>
</li>
<li class="drop-item">
<a href="#" class="drop-link">商业合作</a>
</li>
</ul>
</div>
</body>
<script>
// 将下拉菜单的选中类保存为一个变量，便于使用
var extended = 'dropMenu-extended';
// 获取下拉菜单
var drop = document.getElementById('drop');
// 获取小屏下才显示的按钮元素
var btn = document.getElementById('btn');
// 绑定事件处理函数
btn.onclick = function(){
// 点击按钮时判断下拉菜单元素上的classlist中有无我们需要的类，如没有则添加，有则删除
if(drop.classList.contains(extended)){
// 包含则删除 收起
drop.classList.remove(extended);
}else{
// 添加 展开
drop.classList.add(extended);
}
};
</script>
</html>
1回答
-
好帮手慕码
2020-09-26
同学你好，效果是可以的，不过还有优化的空间：下拉框（除了最后一项），是有底边框的，可以添加：
另，d-none样式表示：隐藏，如下：
小屏幕下，横向排列的导航是要为：隐藏状态的；
d-md-block样式表示：在(min-width: 768px)条件下显示：
因此，在大于768屏幕的情况 下，横向导航条是显示的；
比较绕，同学可以自己结合回复、以及在控制台自己调试再理解一下。
祝学习愉快~
0
相似问题