2

Bootstrap ウェルの背景にテキストを配置する際に問題があります。私は最初にこの質問に問題を投稿しましたが、それは私の問題を単純に表したものでした。メニューの背景にあるテキストであるこの jFiddleで作成された効果を探しています。この例は、私がやりたいように機能しますが、これを Bootstrap に入れると、これ (http://jsfiddle.net/aBqw8/21/)が得られます。

背景のテキストが消えます。おそらく井戸の後ろにあります。ウェルから背景色を削除すると、テキストが表示されます。スパンから「位置：相対」を削除すると、タイトルが表示されますが、メニューに干渉します。これは回避しようとしています。

4

2 に答える 2

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 to 1050 を一部の要素に使用しています。この範囲を使用しないようにしてください。別の競合が発生する可能性があります。_variables.scss (または .less) を確認してください。

于 2012-10-17T15:57:46.220 に答える