我正试图创建一个响应导航栏,它固定在页面顶部,链接高度为全高(100%),这样它们的背景颜色就可以改变。到目前为止,我只成功地修复了导航栏,并且这些链接在设备之间只是有点兼容。我将使用这种效果,即媒体查询强制菜单进入包含在图像中的导航。http://getbootstrap.com/examples/navbar-fixed-top/.我不喜欢bootstrap,我希望在将来自己能够做到这一点。有什么建议吗?
这是我的代码:
玉:
头
链接(rel=“stylesheet”,href=“/main.css”)
导航
ul
li
a(href="/") Home
a(href="/about") About
a(href="/contact") Contact
和
减:
导航
宽度:100%;
高度:3em;
顶部:0px;
左: 0px;
位置:固定;
背景-颜色:#000;
UL Li a{
height:100%;
text-align:center;
margin-top: -3.5em;
text-decoration:none;
padding-right: 9%;
padding-left: 9%;
&:hover {
color:#7f8c8d;
}
}
}
我会重新考虑固定的
标题定位,并加入一个绝对的
方法。我个人不喜欢在我的方式中不断地使用标题,但是绝对
可以通过下面的代码轻松地更改为固定
。
以下是我通常会做的方式,以确保一切都保持领先。
HTML
<div id="wrapper">
<ul id="navBar">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
CSS
html, body {
margin:0;
padding:0;
min-width:100%;
min-height:100%;
}
#wrapper {
background:#AAA;
width:100%;
position:absolute;
left:0;
top:0;
}
ul {
padding:0;
margin:0;
}
li {
float:left;
min-width:50px;
background:#CCC;
list-style:none;
vertical-align:middle;
padding:15px;
}
li a {
color:#000;
}
或者把你自己摆弄掉:
对于媒体查询争吵,请尝试此方法。您可以调整小提琴窗口的大小。对于右下角的预览窗口,尝试将其减少到300px或更低。
我创建了一个固定顶部的bootstrap 4 navbar,它在大屏幕上展开,在其他屏幕上折叠。我还将添加到中,以防止navbar与主体内容重叠。 但是,在较小的屏幕上,当使用hamburger按钮展开折叠的navbar时,它会展开并填充屏幕。然后,一些导航链路变得隐藏(即在显示器之外)。此外,滚动不滚动navbar,而只滚动navbar下面的主体内容。 有没有可能压缩navbar以不占用超过屏幕
本文向大家介绍twitter-bootstrap 基本导航栏(固定在页面顶部),包括了twitter-bootstrap 基本导航栏(固定在页面顶部)的使用技巧和注意事项,需要的朋友参考一下 示例
我有一个布局: 我想在屏幕顶部放置一个进度条,这样即使用户滚动,他们也能看到它。 我更喜欢不将NestedScrollView包装在另一个约束布局中。 更好的是,我希望在需要它的所有其他活动或片段中重用它。 有没有一个简单的方法可以使用AndroidStudios预览功能?
我正在创建一个带有底部导航和抽屉的简单应用程序。 我将所有屏幕包装在带有顶部栏和底部栏的脚手架中。我想在特定屏幕上隐藏顶部栏和底部栏。有人知道如何实现吗 以下是设置导航的代码。 包含用于导航到屏幕
问题内容: 我在网站上使用引导程序,并且导航栏固定顶部出现问题。当我只使用常规导航栏时,一切都很好。但是,当我尝试将其切换到导航栏固定顶部时,该网站上的所有其他内容都会向上移动,就像导航栏不存在并且导航栏与之重叠一样。我基本上是这样布置的: 我试图完全复制引导程序示例,但仅在使用navbar fixed top时仍然存在此问题。我究竟做错了什么? 问题答案: 您的答案是正确的docs: ### 需
本文向大家介绍jQuery 顶部导航跟随滚动条滚动固定浮动在顶部,包括了jQuery 顶部导航跟随滚动条滚动固定浮动在顶部的使用技巧和注意事项,需要的朋友参考一下