我设法让包含扩展菜单的 div 覆盖整个视图(100vh)。我注意到很酷的动画,虽然它正在扩展自己,但只工作到 li 内容的结尾(最后一个菜单链接),然后速度增加或只是动画停止工作,导航栏折叠最终到达结尾查看端口,但不是一个很好的方式。
你知道为什么吗?它是引导 javascript 功能吗?你知道如何解决吗?
我复制了这个小提琴中的代码
body {
padding-top: 53px;
}
.pids-navbar{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
z-index: 99999;
}
.pids-navbar-toggle .pids-icon-bar {
display: block;
width: 16px;
height: 1px;
border-radius: 1px;
}
.pids-navbar-toggle {
margin-top: 14px;
margin-bottom: 14px;
margin-right: 0px;
float: left;
}
.pids-navbar-nav {
margin: 0px -15px;
font-weight: lighter;
}
.pids-navbar-collapse {
border: 0px;
height: calc(100vh - 60px);
}
.full-height {
height: 100%;
}Run Code Online (Sandbox Code Playgroud)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS --> …Run Code Online (Sandbox Code Playgroud)我使用这篇文章作为参考,在具体的工作片段中,但在我的页面(下面的脚本)中,垂直快照滚动不起作用.你知道为什么吗?
.parent {
height: 100vh;
scroll-snap-type: mandatory;
scroll-snap-points-y: repeat(100vh);
scroll-snap-type: y mandatory;
}
section {
height: 100vh;
scroll-snap-align: start;
position: relative;
}
.one {
background-color: red;
}
.two {
background-color: blue;
}
.three {
background-color: grey;
}
.four {
background-color: green;
}Run Code Online (Sandbox Code Playgroud)
<div class="parent row">
<section class="one">
</section>
<section class="two">
</section>
<section class="three">
</section>
<section class="four">
</section>
</div>Run Code Online (Sandbox Code Playgroud)
我的跨度文本应更改为:
font-size: 13px;
line-height: 1.38;
Run Code Online (Sandbox Code Playgroud)
我使用Bootstrap注意到,行高没有任何作用。只有将值设置为1.6以上时,我才能看到更改...
我添加了!important,但是这并没有改变行之间的巨大空间,该空间应小于设计器原型中显示的空间。
您知道为什么会这样吗?
我需要更改链接的内容,但我只能更改我正在处理的页面的 CSS。我尝试使用contentin:before和:after伪元素中的属性。但我没有找到一种方法来用新值替换该值。我只能将内容附加到标签之间指定的值、开头和结尾,而不是像我需要的那样完全替换它。
a:before {
content: 'ciao 1'
}
a:after {
content: 'ciao 2'
}Run Code Online (Sandbox Code Playgroud)
<a href="https://www.w3schools.com/css/">CSS Tutorial</a>Run Code Online (Sandbox Code Playgroud)
我该怎么做才能真正“替换”链接标签的内容?