html - 一行中的第一个图像小于其他 html/css

Question

你好，我正在为学院做一个练习，我正在写一个博客，但是第一张图片比它们应该的小，请帮忙

这里是代码:

<div class="container">
            <div class="jumbotron">
                <h1><i class="fa fa-camera-retro"></i> Image Gallery</h1>
            </div>
            <hr class="style-four">
            <div class="row">
                <!-- This Row is the one that is smaller -->
                <div class="col-lg-4 col-sm-6">
                    <div class="thumbnail">
                    <img src="https://images.unsplash.com/photo-1469173479606-ada03df615ac?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop=">
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6">
                    <div class="thumbnail">
                    <img src="https://images.unsplash.com/photo-1469173479606-ada03df615ac?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop=">
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6">
                    <div class="thumbnail">
                    <img src="https://images.unsplash.com/photo-1469173479606-ada03df615ac?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop=">
                    </div>
                </div>

             <!-- This row is ok-->
             <div class="row">
                <div class="col-lg-4 col-sm-6">
                    <div class="thumbnail">
                        <img src="https://images.unsplash.com/photo-1469173479606-ada03df615ac?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop=">
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6">
                    <div class="thumbnail">
                        <img src="https://images.unsplash.com/photo-1469173479606-ada03df615ac?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop=">
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6">
                    <div class="thumbnail">
                        <img src="https://images.unsplash.com/photo-1469173479606-ada03df615ac?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop=">
                    </div>
                </div>
            </div>

这是我的结果图片:

Answer 1

不是 100% 确定，但试试这个:您缺少结尾 </div > 第一行的标记。以及容器类的相同结束标记。

我都加了，应该是:

<div class="container">
    <div class="jumbotron">
        <h1><i class="fa fa-camera-retro"></i> Image Gallery</h1>
    </div>
    <hr class="style-four">
    <div class="row">
        <!-- This Row is the one that is smaller -->
        <div class="col-lg-4 col-sm-6">
            <div class="thumbnail">
                <img src="https://images.unsplash.com/photo-1469173479606-ada03df615ac?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop=">
            </div>
        </div>
        <div class="col-lg-4 col-sm-6">
            <div class="thumbnail">
                <img src="https://images.unsplash.com/photo-1469173479606-ada03df615ac?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop=">
            </div>
        </div>
        <div class="col-lg-4 col-sm-6">
            <div class="thumbnail">
                <img src="https://images.unsplash.com/photo-1469173479606-ada03df615ac?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop=">
            </div>
        </div>
    </div>
    <!-- added the missing end tag -->
    <!-- This row is ok-->
    <div class="row">
        <div class="col-lg-4 col-sm-6">
            <div class="thumbnail">
                <img src="https://images.unsplash.com/photo-1469173479606-ada03df615ac?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop=">
            </div>
        </div>
        <div class="col-lg-4 col-sm-6">
            <div class="thumbnail">
                <img src="https://images.unsplash.com/photo-1469173479606-ada03df615ac?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop=">
            </div>
        </div>
        <div class="col-lg-4 col-sm-6">
            <div class="thumbnail">
                <img src="https://images.unsplash.com/photo-1469173479606-ada03df615ac?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop=">
            </div>
        </div>
    </div>
</div>