为什么我的常规导航栏覆盖标题,而折叠的标题没有?(Why does my regular navbar cover header while the collapsed one does not? (bootstrap/fullpage))
我的导航栏覆盖了我的标题而不是相对于标题高度位于下方,我遇到了一些问题。 当我使用一个较小的屏幕并且导航栏过去折叠时它的位置就像它应该的那样,为什么会这样?
main { position: relative; background-image: url(asdasdads-321-redigerad-2.jpg); top: 0; width: 100%; height: 100%; background-color: white; background-repeat: no-repeat; background-position: bottom; background-size: cover; } header { width: 100%; height: 100px; position: fixed; top: 0; } .container { position: relative; } .navbar-fixed-top { position: relative; } .navbar-default { position: relative; width: 100%; background-color: rgba(255, 255, 255, 0); border-bottom: 3px solid rgba(51, 51, 51, 0); }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <header> <h1>header</h1> <p>asdf asdas dasdadf dgfsd sdf asf fsdfsdf sdfa sfasf df</p> </header> <nav class="navbar-default" role="navigation"> <div class="container"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-container"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="collapse navbar-collapse" id="navbar-container"> <ul id="menu"> <li><a href="#firstPage" title="Ab knapp" id="Ab-logo">UPPDRAG</a></li> <li data-menuanchor="secondPage" id="filosofi"><a href="#secondPage">FILOSOFI</a></li> <li data-menuanchor="thirdPage" id="uppdrag"><a href="#thirdPage">UPPDRAG</a></li> <li data-menuanchor="4thpage" id="karriär"><a href="#4thpage">KARRIÄR</a></li> <li data-menuanchor="5thpage" id="academy"><a href="#5thpage">ACADEMY</a></li> <li data-menuanchor="lastPage" id="kontakt"><a href="#lastPage">KONTAKT</a></li> </ul> </div> </div> </nav>
I have some problems with my navbar covering my header instead of positioning below relative to the header height. When i use a smaller screen and the navbar goes over to collapse it positions below like it should, how come?
main { position: relative; background-image: url(asdasdads-321-redigerad-2.jpg); top: 0; width: 100%; height: 100%; background-color: white; background-repeat: no-repeat; background-position: bottom; background-size: cover; } header { width: 100%; height: 100px; position: fixed; top: 0; } .container { position: relative; } .navbar-fixed-top { position: relative; } .navbar-default { position: relative; width: 100%; background-color: rgba(255, 255, 255, 0); border-bottom: 3px solid rgba(51, 51, 51, 0); }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <header> <h1>header</h1> <p>asdf asdas dasdadf dgfsd sdf asf fsdfsdf sdfa sfasf df</p> </header> <nav class="navbar-default" role="navigation"> <div class="container"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-container"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="collapse navbar-collapse" id="navbar-container"> <ul id="menu"> <li><a href="#firstPage" title="Ab knapp" id="Ab-logo">UPPDRAG</a></li> <li data-menuanchor="secondPage" id="filosofi"><a href="#secondPage">FILOSOFI</a></li> <li data-menuanchor="thirdPage" id="uppdrag"><a href="#thirdPage">UPPDRAG</a></li> <li data-menuanchor="4thpage" id="karriär"><a href="#4thpage">KARRIÄR</a></li> <li data-menuanchor="5thpage" id="academy"><a href="#5thpage">ACADEMY</a></li> <li data-menuanchor="lastPage" id="kontakt"><a href="#lastPage">KONTAKT</a></li> </ul> </div> </div> </nav>
原文:https://stackoverflow.com/questions/36056844
2023-08-12 08:08
满意答案
使用以下css对齐square :
h1{ position:relative; } .square-stop { font-size: 0.7em; position: absolute; bottom: 0; }
I was using the font Myriad Pro which was causing this problem in Chrome, I fixed this but setting the .square-stop font as Arial.
You can view my fix here: http://jsfiddle.net/9a8x844n/3/
.square-stop {font-size: 0.7em; font-family: Arial;}
相关问答
更多绝对位置,但相对于父母(Position absolute but relative to parent)
#father {
position: relative;
}
#son1 {
position: absolute;
top: 0;
}
#son2 {
position: absolute;
bottom: 0;
}
这是因为position: absolute意味着像“使用top , right , bottom , left与自己位于与position: absolute或position: relative的最近的祖先position: relativ...
使用CSS将HTML元素相对于父元素的底部定位?(Position HTML element relative to bottom of parent element using CSS?)
工作得很好 section {
position: relative;
}
.contentbox, #proclaim {
bottom: 10px; // your value
position: absolute;
}
works just fine section {
position: relative;
}
.contentbox, #proclaim {
bottom: 10px; // your value
position: absolute;
}
css`位置:绝对;(css `position: absolute; bottom: 0` moving div to bottom of screen instead of bottom of parent [duplicate])
你需要position: relative标题上的position: relative 。 没有它,它就不会像它是一个子元素。 没有relative它的行为就像它只是在body而不是在父元素中: * {
font-family: Arial, sans-serif;
border: 0 solid black;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
heig...
将HTML特殊字符集相对于父级对齐(Aligning HTML special charaters bottom relative to parent)
使用以下css对齐square : h1{
position:relative;
}
.square-stop {
font-size: 0.7em;
position: absolute;
bottom: 0;
}
I was using the font Myriad Pro which was causing this problem in Chrome, I fixed this but setting the .square-stop font...
如何获取相对于父级的元素位置?(How to get element position relative to parent?)
获取其容器的x和y位置,并从适当的值中扣除这些值。 jsFiddle 。 或者,给可拖动元素的position: absolute和父position: relative 。 jsFiddle 。 Take the x and y position of its container and deduct those values from the appropriate values. jsFiddle. Alternatively, give the draggable element's po...
将div移至其他要求的父级底部(Move div to bottom of parent with other requirements)
您可以将margin-top: auto和width: 100%赋予子元素: .parent {
width: 500px;
height: 250px;
background-color: gray;
padding: 10px;
display: flex;
}
.child {
height: 50px;
text-align: right;
margin-top: auto;
width: 100%;
} <div class...
底部对齐div而不指定父容器高度(Bottom aligning div without specifying parent container height)
如果你需要使用div而不是表来执行此操作,可以使用css for display:table来使div像表一样响应: HTML <div class="table">
<div class="row">
<div class="cell c9 right last">Text</div>
<div class="cell c8 right gCol8">Long text wrapped over multiple lines</div>
<...
如何使用相对父位置将页脚绑定到页面底部?(How to bound a footer to the page bottom with relative parent position?)
你需要将这个css代码添加到页脚 footer{
position: absolute;
bottom: 0;
width: 100%;
}
这将使页脚位于第一个父项的底部,其相对位置在这种情况下是容器div you need to add this css code to the footer footer{
position: absolute;
bottom: 0;
width: 100%;
}
this will position the...
div跳过溢出隐藏但相对于父div保持(div skipping overflow hidden but remaining relative to parent div)
你可以这样做: 删除position: relative .blabla 设置position: absolute .wrapper , .parent和.child 。 .wrapper {
position: absolute;
width: 1280px;
}
.parent {
position: absolute;
}
.child {
position: absolute;
width: 960px;
}
.blabla {
overfl...
使宽度不相对于父级(Make width not relative to parent)
看一下频谱文档。 您可以使用“appendTo”属性来更改颜色选择器相对于哪个元素。 $("#droppable").spectrum({
appendTo: "body",
showPalette: true,
showSelectionPalette: true,
});
这将创建您可能正在寻找的并排视图。 由于您希望颜色选择器使用包装器拖动并相对定位,因此请在绑定到频谱处理程序的元素上尝试以下样式规则: <div id="wrapper" style="overflow: vi...
相关文章
更多BootStrap入门教程 (三)
上讲回顾:Bootstrap的基础CSS(Base CSS)提供了优雅,一致的多种基础Html页面要素
...
BootStrap入门教程 (四)
上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境。这些组件包括按钮(
...
项目移到linux环境下时tomcat报错 java.util.zip.ZipException: invalid END header
我把我的一个windows环境下的项目移到linux环境下时tomcat报错,报错如下: java.
...
【原创】小白学jquery Mobile《构建跨平台APP:jQuery Mobile移动应用实战》连载五(给按钮加图标)
在范例5-4所使用的导航栏中,已经为按钮加入了图标的样式,但是当时并没有介绍按钮的图标究竟是怎么一回事
...
HttpClient 请求添加Header头部信息
HTTP消息可以包含许多描述消息属性的标头,例如内容长度,内容类型,授权等。 HttpClient提供
...
windows phone开发中textbox控件的header属性
备注;博主windows phone学习新手,在博客园上分享自己刚刚掌握的一些学习笔记,内容简单,高手
...
extjs 读到的json只显示header 可能是什么原因?
<script type="text/javascript"> Ex
...
BootStrap入门教程 (二)
上讲回顾:Bootstrap的手脚架(Scaffolding)提供了固定(fixed)和流式(flui
...
左则导航鼠标滑过时显示详情的实现
当滑过左边导航栏时右边出现描述框的制作。 1. hover时如何把右边的边框去掉。 2.如何让 外
...
最新问答
更多获取MVC 4使用的DisplayMode后缀(Get the DisplayMode Suffix being used by MVC 4)
我用Google搜索了一个解决方案。 “EnumDisplayModeProvider”是我自己设置网站的各种模式的枚举。 public EnumDisplayModeProvider GetDisplayModeId() { foreach (var mode in DisplayModeProvider.Instance.Modes) if (mode.CanHandleContext(HttpContext)) {
如何通过引用返回对象?(How is returning an object by reference possible?)
这相对简单:在类的构造函数中,您可以分配内存,例如使用new 。 如果你制作一个对象的副本,你不是每次都分配新的内存,而是只复制指向原始内存块的指针,同时递增一个也存储在内存中的引用计数器,使得每个副本都是对象可以访问它。 如果引用计数降至零,则销毁对象将减少引用计数并仅释放分配的内存。 您只需要一个自定义复制构造函数和赋值运算符。 这基本上是共享指针的工作方式。 This is relatively easy: In the class' constructor, you allocate m
矩阵如何存储在内存中?(How are matrices stored in memory?)
正如它在“熵编码”中所说的那样,使用Z字形图案,与RLE一起使用,在许多情况下,RLE已经减小了尺寸。 但是,据我所知,DCT本身并没有给出稀疏矩阵。 但它通常会增强矩阵的熵。 这是compressen变得有损的点:输入矩阵用DCT传输,然后量化量化然后使用霍夫曼编码。 As it says in "Entropy coding" a zig-zag pattern is used, together with RLE which will already reduce size for man
每个请求的Java新会话?(Java New Session For Each Request?)
你是如何进行重定向的? 您是否事先调用了HttpServletResponse.encodeRedirectURL()? 在这里阅读javadoc 您可以使用它像response.sendRedirect(response.encodeRedirectURL(path)); The issue was with the path in the JSESSIONID cookie. I still can't figure out why it was being set to the tomca
css:浮动div中重叠的标题h1(css: overlapping headlines h1 in floated divs)
我认为word-break ,如果你想在一个单词中打破行,你可以指定它,这样做可以解决问题: .column { word-break:break-all; } jsFiddle演示。 您可以在此处阅读有关word-break属性的更多信息。 I think word-break, with which you can specify if you want to break line within a word, will do the trick: .column { word-break
无论图像如何,Caffe预测同一类(Caffe predicts same class regardless of image)
我认为您忘记在分类时间内缩放输入图像,如train_test.prototxt文件的第11行所示。 您可能应该在C ++代码中的某个位置乘以该因子,或者使用Caffe图层来缩放输入(请查看ELTWISE或POWER图层)。 编辑: 在评论中进行了一次对话之后,结果发现在classification.cpp文件中错误地删除了图像均值,而在原始训练/测试管道中没有减去图像均值。 I think you have forgotten to scale the input image during cl
xcode语法颜色编码解释?(xcode syntax color coding explained?)
转到: Xcode => Preferences => Fonts & Colors 您将看到每个语法高亮颜色旁边都有一个简短的解释。 Go to: Xcode => Preferences => Fonts & Colors You'll see that each syntax highlighting colour has a brief explanation next to it.
在Access 2010 Runtime中使用Office 2000校对工具(Use Office 2000 proofing tools in Access 2010 Runtime)
你考虑过第三方拼写检查吗? 您可以将在C#中开发的自定义WinForms控件插入访问数据库吗? VB6控件怎么样? 如果你能找到一个使用第三方库进行拼写检查的控件,那可能会有效。 Have you considered a third party spell checker? Can you insert a custom WinForms controls developed in C# into an access database? What about a VB6 control? If
从单独的Web主机将图像传输到服务器上(Getting images onto server from separate web host)
我有同样的问题,因为我在远程服务器上有两个图像,我需要在每天的预定义时间复制到我的本地服务器,这是我能够提出的代码... try { if(@copy('url/to/source/image.ext', 'local/absolute/path/on/server/' . date("d-m-Y") . ".gif")) { } else { $errors = error_get_last(); throw new Exception($err
从旧版本复制文件并保留它们(旧/新版本)(Copy a file from old revision and keep both of them (old / new revision))
我不确定我完全明白你在说什么。 你能编辑你的帖子并包含你正在做的Subversion命令/操作的特定顺序吗? 最好使用命令行svn客户端,以便容易为其他人重现问题。 如果您只是想获取文件的旧副本(即使该文件不再存在),您可以使用如下命令: svn copy ${repo}/trunk/moduleA/file1@${rev} ${repo}/trunk/moduleB/file1 其中${repo}是您的存储库的URL, ${rev}是您想要的文件的版本。 这将恢复该文件的旧版本,包括最高版本
Copyright ©2023 peixunduo.com All Rights Reserved.粤ICP备14003112号
本站部分内容来源于互联网,仅供学习和参考使用,请莫用于商业用途。如有侵犯你的版权,请联系我们(neng862121861#163.com),本站将尽快处理。谢谢合作!