Question

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

Answer 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>

DEMO

调整缩略图标题的问题

1 个答案: