Twitter bootstrap 引导响应音频播放器

我需要帮助。 当我在容器中使用音频（引导）时，我一行有4个播放器-这很好（col-lg-3），但当我调整窗口大小（从col-md-4到col-xs-6）时，神奇发生了。。。玩家在不同的地方：/n您可以在这里看到：

鸟的翅膀

您的浏览器不支持音频元素。
鸟的翅膀

您的浏览器不支持音频元素。
鸟的翅膀

您的浏览器不支持音频元素。
鸟的翅膀

您的浏览器不支持音频元素。

您能否添加一个指向JSFIDLE（或类似文件）的链接以便于测试？无需担心，我发现了，简单错误-无引号：/能否添加指向JSFIDLE（或类似文件）的链接以便于测试？无需担心，我发现了，简单错误-无引号：/

<div class="container">
    <div class="row">
      <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
        <p class="titles">Bird Wings</p>
        <audio class="audio controls">
        <source src="http://audiosoundclips.com/wp-content/uploads/2011/12/Dogbark.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
        </audio>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
        <p class="titles">Bird Wings</p>
        <audio class="audio controls">
        <source src="http://audiosoundclips.com/wp-content/uploads/2011/12/Dogbark.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
        </audio>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
        <p class="titles">Bird Wings</p>
        <audio class="audio controls">
        <source src="http://audiosoundclips.com/wp-content/uploads/2011/12/Dogbark.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
        </audio>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
        <p class="titles">Bird Wings</p>
        <audio class="audio controls">
        <source src="http://audiosoundclips.com/wp-content/uploads/2011/12/Dogbark.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
        </audio>
      </div>
    </div>
  </div>