Html CSS3转换与转换

我希望我的简单响应引导的缩略图在调整浏览器窗口大小时平滑移动

那么，使用

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>

---

提前感谢

您希望为所有

li

元素添加CSS转换类，然后为设计中的每个断点添加CSS转换类。这将把所有事情分解成不同的安排

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

---

诺汉你好

要让它转换，首先需要给它一些在…之间转换的点。。。喜欢在其中添加类。
从

col-lg-3

到

col-md-4

到

col-sm-6

等等

这里有一个正在工作的可供查看

添加到此帖子中
为了让其他阅读本文的人明白这一点

您还可以使用all和width进行此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; 
}

---

这里有一个使用all作为另一个选项。

非常有趣，我以前尝试过这种方法，但没有收到任何效果。。。。。。你能带我去吗？--像这样的。然而，如果你想看到它们重新排列，你必须使用JavaScript。这个插件是你可能正在寻找的：非常感谢。。。。我找到了为什么不给我效果的原因。。。。我是给过渡：所有。。。但正确的方法是过渡：宽度。。。。。产生平滑的效果moving@Norhan，您也可以全部使用，这样会很好。它只是需要一些东西来工作。。。转换到.Ya，正如我看到的示例（谢谢：）。。。它的工作原理正是我想要的：）。。。。。非常感谢你让我知道为什么它没有给我同样的效果嗨，不客气。只需要给过渡一个工作的地方。实际上，我只需要为宽度进行过渡。。。。。我为大家做的。。。。所以效果不起作用。。。。再次感谢----更新后的我的代码：

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