0

我想在我的 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>
4

1 回答 1

2

我无法完全想象你的目标，但这是一个开始吗？
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;
}

祝你好运！

于 2013-02-11T01:59:14.763 回答