0

span8の幅とさまざまな高さのモジュールを作成しようとしています。divの高さを定義する画像と、画像の上に配置されるテキストがあります。Bootstrapがdivのサイズを変更したときに、画像の一部がトリミングされないようにする方法を理解するのに問題があります。

さらに、テキストボックスの配置方法がわかりません。2つのテキストボックスを作成しようとしています。1つは垂直方向に0％、もう1つは垂直方向に50％です。

<div class="row">
    <div class="span12 promo">
        <div class="content">
            <div class="row-fluid">
                <div class="topText span24">
                    Text positioned on the top half
                </div>
            </div>
            <div class="row-fluid">
                <div class="botText span24">
                    Text positioned on the bottom half
                </div>
            </div>
        </div>
    </div>
</div>

.promo { height: 100%; }
.promo .content { width: 100%; height: 100%; background:url(http://www.placehold.it/470x188) no-repeat; }    
.promo .content .row-fluid { height: 50px; }
4

1 に答える 1

0

min-heightプロパティを設定してみましたか？これにより、画像が途切れないように最小の高さが設定されます。

両方のdivをheight:50%;に設定してみます。これで正しい効果が得られるはずです。

于 2012-10-04T23:57:17.380 に答える