有什么方法可以在 Bootstrap 中使 html5 音频响应？答案

【问题标题】：Any way to make html5 audio responsive in Bootstrap?有什么方法可以在 Bootstrap 中使 html5 音频响应？
【发布时间】：2017-08-09 03:36:31
【问题描述】：

我有一个简单的 HTML5 音频播放器，我想在 Bootstrap 中做出响应。

    <div class="col-sm-4 col-sm-offset-4">
      <audio controls style="width: 600px;">
        <source src="sample.mp3">
      </audio>
    </div>

有没有办法使包含此音频播放器的 div 响应，无论其中包含什么内容，或者至少是一个类或其他东西，以使音频播放器响应？如果可能，希望不必使用外部库。

谢谢！

【问题讨论】：

以什么方式响应？您希望控件始终为 100% 宽度，还是什么？

标签： css html twitter-bootstrap audio responsive-design

【解决方案1】：

我建议使用width:100% 和max-width:600px。当您在桌面浏览器中缩小窗口时，您将不会像在真正的移动设备上那样看到它，但移动设备（即 iOS、Android）上的音频元素肯定会更小 - 你不会对其外观有很大影响。与这些设置一起，它应该能够正确适应几乎任何情况。

（您可能只想添加第二个带有ogg 格式音频的source 标签，并在源标签中添加文件格式，请参阅https://www.w3schools.com/tags/tag_audio.asp）

【讨论】：

这行得通，谢谢！我猜我想在课堂上有一个 BootStrap，但这是一个很好的解决方法！

【解决方案2】：

试试：

<div class="col-sm-4 col-sm-offset-4 embed-responsive embed-responsive-4by3">
    <audio controls class="embed-responsive-item">
        <source src="sample.mp3">
    </audio>
</div>

参考：http://getbootstrap.com/components/#responsive-embed

【讨论】：

谢谢，但这不起作用。 “embed-responsive-4by3”应该只用于视频标签而不是音频。