Question

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

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

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

谢谢！

Answer 1

我建议使用width:100%和max-width:600px。当您在桌面浏览器中缩小窗口时，您将看不到与真实移动设备上相同的方式，但移动设备（即iOS，Android）上的音频元素无论如何都肯定会更小 - 您不会＃39对它的出现有很大的影响。与这些设置一起，它应该适应任何情况。

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

Answer 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

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

2 个答案: