Question

我正在一个网站上工作，我需要创建四个宽度相等的列。在列之上，我需要放置一个图像。以下是我的代码：

<div class="row">
    <div class="col-xs-1"></div>
    <div class="col-xs-10">
        <div class="row" style="margin-bottom:30px;">
            <div class="col-xs-3">
                <div class="row" style="width:100%;height:auto;">
                    <img src="images/small/one.jpg" />
                </div>
                <div class="row" style="height:200px;">
                    <div class="col-xs-12">First column title</div>
                </div>
            </div>
            <div class="col-xs-3">
                <div class="row" style="width:100%;height:auto;">
                    <img src="images/small/two.jpg" />
                </div>
                <div class="row" style="height:200px;">
                    <div class="col-xs-12">Second column title</div>
                </div>
            </div>
            <div class="col-xs-3">
                <div class="row" style="width:100%;height:auto;">
                    <img src="images/small/three.jpg" />
                </div>
                <div class="row" style="height:200px;">
                    <div class="col-xs-12">Third column title</div>
                </div>
            </div>
            <div class="col-xs-3">
                <div class="row" style="width:100%;height:auto;">
                    <img src="images/small/four.jpg" />
                </div>
                <div class="row" style="height:200px;">
                    <div class="col-xs-12">Fourth column title</div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xs-1"></div>
</div>

如何将图像正确放置在列上方，图像宽度等于列宽，而不创建多个尺寸的图像？

Answer 1

请找到有效的代码。我刚刚在构建类中添加了“img-responsive”类，它是所有图像标记。

<div class="row">
    <div class="col-xs-1"></div>
    <div class="col-xs-10">
        <div class="row" style="margin-bottom:30px;">
            <div class="col-xs-3">
                <div class="row" style="width:100%;height:auto;">
                    <img src="images/small/one.jpg" class="img-responsive"/>
                </div>
                <div class="row" style="height:200px;">
                    <div class="col-xs-12">First column title</div>
                </div>
            </div>
            <div class="col-xs-3">
                <div class="row" style="width:100%;height:auto;">
                    <img src="images/small/two.jpg" class="img-responsive"/>
                </div>
                <div class="row" style="height:200px;">
                    <div class="col-xs-12">Second column title</div>
                </div>
            </div>
            <div class="col-xs-3">
                <div class="row" style="width:100%;height:auto;">
                    <img src="images/small/three.jpg" class="img-responsive"/>
                </div>
                <div class="row" style="height:200px;">
                    <div class="col-xs-12">Third column title</div>
                </div>
            </div>
            <div class="col-xs-3">
                <div class="row" style="width:100%;height:auto;">
                    <img src="images/small/four.jpg" class="img-responsive"/>
                </div>
                <div class="row" style="height:200px;">
                    <div class="col-xs-12">Fourth column title</div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xs-1"></div>
</div>

如何在Bootstrap中以不同的分辨率保持图像大小正确？

1 个答案: