Question

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

Answer 1

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

祝你好运！

如何在twitter bootstrap顶部导航栏前叠加图像？

1 个答案: