css - 何时使用 Bootstrap 类属性值 ".embed-responsive-item"？

Question

希望对你有所帮助。我不明白以下代码片段中的 ".embed-responsive-item" 类(使 iframe、视频等响应的 Bootstrap 代码)到底有什么用，因为它已应用无论如何到 iframe 元素，即使你离开类属性值:

<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>

这实际上与(至少根据我的理解)几乎相同:

<div class="embed-responsive embed-responsive-16by9">
<iframe src="..."></iframe>
</div>

为什么首先要使用它？

来源:http://getbootstrap.com/components/#responsive-embed

"optionally use an explicit descendant class .embed-responsive-item when you want to match the styling for other attributes."

这句话究竟是什么意思？你能举个例子吗？

Answer 1

正如您已经发现的那样，没有任何意义。如文档中所述，并通过查看 responsive-embed.less 得到支持, .embed-responsive-item产生与裸 iframe 完全相同的样式单独的元素。

如果您可能正在使用某些东西来生成坚持注入(inject)另一层标记的内容(例如，在父级 <div/> 和 <div 'embed-responsive'> 之间包装 <iframe/>)，那么该类可能有助于确保预期宽度/高度比例得到尊重。