gpt4 book ai didi

html - 如何在 twitter bootstrap 的顶部导航栏前面重叠图像?

转载 作者:太空宇宙 更新时间:2023-11-04 04:44:20 25 4
gpt4 key购买 nike

我想在我的 Twitter Bootstrap 页面上放置一个横幅图像,图像的顶部重叠并位于顶部导航栏的前面。

我的 html 代码如下所示。它适用于小屏幕宽度,但对于更宽的屏幕,图像的顶部出现在导航栏后面。我正在使用 Bootstrap v2.2.2。

有什么想法可以使它适用于所有屏幕尺寸吗?非常感谢!

<body>
<div class="navbar navbar-inverse navbar-fixed-top">
...
</div>
<style type="text/css">
.mypic {margin: -120px 0 -20px 10px;}
</style>
<div class="container">
<div class="mypic">
<img src="..." width="300"/>
</div>
</div>
...
</body>

最佳答案

我不太清楚你的目标是什么,但这是一个开始吗?
http://jsfiddle.net/panchroma/xdv9m/

您可能需要使用媒体查询来优化小窗口尺寸的结果。

CSS

.mypic {
margin: -120px 0 -20px 10px; /* play with these to position the image */
position:absolute;
z-index:100;
width:300px;
}

祝你好运!

关于html - 如何在 twitter bootstrap 的顶部导航栏前面重叠图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14796786/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com