Question

我有多个视频，我希望以网格格式将其调整为其父级bootstrap div，但奇怪的是它增加了col的大小而不是视频本身。

以下是代码如何以网格格式进行的示例。在我的CSS文件中，类gif-video的宽度和高度都设置为300。

这是代表我的问题的image。

如果我将gif-video的宽度和高度更改为100％，这就是它的样子。大小是正确的，但有空格，好像div被推下来了。

这是代表此问题的image。

<div class="container">
    <div class="row">
    <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <video class="gif-video" autoplay loop poster="http://thumbs.gfycat.com/<%= title %>.jpg">     
                    <source src=<%= gif.webmurl %> type="video/webm">
                    <source src=<%= gif.mp4url %> type="video/mp4">
                </video>  
            </div>
     </div>
</div>

Answer 1

将max-height和max-width设置为div，某些视频必须稍大一点，并且可能将填充推向右侧或底部

Bootstrap 3：将视频适合网格

1 个答案: