2

我在将文本放在 Bootstrap 的背景中时遇到问题。我首先在这个问题中发布了问题，但这对我的问题来说太简单了。我正在寻找在此 jFiddle中创建的效果，即菜单背景中的文本。该示例适用于我想要的工作方式，但是当我将它放入 Bootstrap 时，我得到了这个 (http://jsfiddle.net/aBqw8/21/)。

背景文字消失了，很可能是在井的后面。当我从井中删除背景颜色时，我可以看到文字。如果我从跨度中删除“位置：相对”，它会显示标题，但它会干扰菜单，这是我试图避免的。

4

2 回答 2

1

在 CSS 中将 z-index 从 -1 更改为正数（我喜欢 1000，所以它总是在顶部）

看到这个小提琴：http: //jsfiddle.net/aBqw8/22/

于 2012-10-17T11:01:01.950 回答
0

尝试这个：

HTML

<div class='well'>
    <div class='bg-title'>
      <span class='title'>TITLE GOES HERE</span>
    </div>
    <ul class='nav nav-pills'>
        <li><a href='#'>menu1</a></li>
        <li><a href='#'>menu2</a></li>
    </ul>
</div>

CSS

.bg-title {
    height: 100%;
    position: relative;
    width: 100%;
}

.title {
    display: block;
    font-size: 47px;
    font-weight: bold;
    opacity: 0.2;
    position: relative;
    text-align: right;
    top: 37px; // whatever ...
    z-index: 90; // Must be behind your .nav-pills, if you use "-1" it will go behind the .well!
}

.nav-pills {
    //include ...
    z-index: 99;
}

注意： Bootstrap 的某些元素使用 z-index: 1000 到 1050 - 所以尽量不要使用这个范围，否则你可能会陷入另一个冲突 - 检查 _variables.scss （或 .less）

于 2012-10-17T15:57:46.220 回答