1

我在调整缩略图标题的大小时遇到​​问题在第三行中，我希望“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 回答