Question

我希望在调整大小浏览器窗口期间，我的简单响应式引导程序的缩略图Here能够顺利移动。

那么使用CSS3 过渡和转换的任何方式都可以做到这一点？我不想使用任何jQuery插件。它只是一个简单的画廊

HTML

<div class=" container">
    <div class="row">
        <ul class="thumbnails ">
            <li class="col-md-3     ">
                <a class="thumbnail" href="http://conflictbase.com/">

                    <img src="http://placehold.it/300" alt="" class="img-responsive" />

                </a>
            </li>
            <li class="col-md-3    ">
                <a class="thumbnail" href="http://conflictbase.com/">

                    <img src="http://placehold.it/300" alt="" class="img-responsive" />

                </a>
            </li>
            <li class="col-md-3    ">
                <a class="thumbnail" href="http://conflictbase.com/">

                    <img src="http://placehold.it/300" alt="" class="img-responsive" />

                </a>
            </li>
            <li class="col-md-3   ">
                <a class="thumbnail" href="http://conflictbase.com/">

                    <img src="http://placehold.it/300" alt="" class="img-responsive" />

                </a>
            </li>
            <li class="col-md-3    ">
                <a class="thumbnail" href="http://conflictbase.com/">

                    <img src="http://placehold.it/300" alt="" class="img-responsive" />

                </a>
            </li>
            <li class="col-md-3   ">
                <a class="thumbnail" href="http://conflictbase.com/">

                    <img src="http://placehold.it/300" alt="" class="img-responsive" />

                </a>
            </li>
            <li class="col-md-3   ">
                <a class="thumbnail" href="http://conflictbase.com/">

                    <img src="http://placehold.it/300" alt="" class="img-responsive" />

                </a>
            </li>
            <li class="col-md-3    ">
                <a class="thumbnail" href="http://conflictbase.com/">

                    <img src="http://placehold.it/300" alt="" class="img-responsive" />

                </a>
            </li>
        </ul>
    </div>
</div>

CSS

    ul.thumbnails li{
    display: inline-block;
   }
   .thumbnail{
    border: 0;
    box-shadow: none;
    padding: 0;
}
.thumbnail img{
        height:100%;
        width:100%;
}
body{
    margin:30px 0px;
}

提前致谢

Answer 1

Norhan 你好。

要让它过渡，首先需要给它一些点来过渡...就像在这里添加类一样。
要从col-lg-3转到col-md-4再到col-sm-6，依此类推。

这是一个可以查看的 Fiddle 。

已添加到此帖子
为了让其他人阅读这篇文章清楚明白。

您还可以使用所有和宽度进行此css转换。
像这样...

.transition-width { 
    transition: all 2s ease-out; 
    webkit-transition: all 2s ease-out; 
}

或使用宽度

.transition-width { 
    transition: width 2s ease-out; 
    webkit-transition: width 2s ease-out; 
}

以下是使用所有作为另一种选择的 Fiddle 。

Answer 2

您可能希望为所有li元素添加CSS过渡类，然后为设计中的每个断点添加insert media queries。这应该处理分解成不同安排的一切。

   ul.thumbnails li{
    display: inline-block;
    transition:all 0.5s;
   }

CSS3过渡和转换

2 个答案: