1

サムネイル キャプションのサイズ変更に問題があります 3 行目で、「2012」を左に配置し、「1.Preis」を右に配置します。最初に理解できないのは、作業する列が 10 個しかないように見えることです。col-md-offset-10 を使用しようとすると、「1.Preis」が次の行にジャンプします。

これも bootply コードの例です。http://bootply.com/82887 ウィンドウのサイズを変更しようとすると (タブレット サイズ モードに入る前に) ご覧のとおり、「1.Preis」がサムネイルの境界線から離れます。

<div class="row">   
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="http://lorempixel.com/400/300/">
                <div class="caption">
                    <p>Wohnprojekt Eggenberger Gürtel</p>
                    <p>Graz-Gries</p>
                    <div class="row">
                        <div class="col-md-1"><p>2012</p></div>
                        <div class="col-md-1 col-md-offset-8"><p>1.Preis</p></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="http://lorempixel.com/400/300/">
                <div class="caption">
                    <p>Gutachterverfahren Kalsdorf-Siro</p>
                    <p>Kalsdorf</p>
                    <p>2011</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="http://lorempixel.com/400/300/">
                <div class="caption">
                    <p>Gutachterverfahren Kalsdorf-Siro</p>
                    <p>Kalsdorf</p>
                    <p>2011</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="http://lorempixel.com/400/300/">
                <div class="caption">
                    <p>Gutachterverfahren Kalsdorf-Siro</p>
                    <p>Kalsdorf</p>
                    <p>2011</p>
                </div>
            </div>
        </div>
    </div>
4

1 に答える 1

1

フロートを使用して、必要な外観を取得できます。

<div class="thumbnail">
    <img src="http://lorempixel.com/400/300/">
    <div class="caption">
        <p>Wohnprojekt Eggenberger Gürtel</p>
        <p>Graz-Gries</p>
        <p style="float:left;">2012</p>
        <p style="text-align:right;">1.Preis</p>
    </div>
</div>

デモ

于 2013-09-24T15:05:44.813 に答える