我想在我的Twitter引导页面上放置一个横幅图片,图片顶部重叠在顶部导航栏的前面。
我的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;
}
祝你好运!