Bootstrap 音频播放器的列布局答案

【问题标题】：Column Layout for Bootstrap Audio PlayerBootstrap 音频播放器的列布局
【发布时间】：2020-10-26 01:50:45
【问题描述】：

我想使用 HTML、CSS（引导程序）为网站设计一个音频播放器页脚，但我正在努力弄清楚列的布局以正确对齐所有资产。这是我想要实现的布局：

这是我目前拥有的：

这是我拥有的以下代码：

<div class="column-wrapper-player" style="align-items: center;">
    <div class="col-left-player">
        <img src="/img.png" class="track ml-5" width="60" height="60"> </img>
    </div>

    <div class="col-right-player">
         <h5 class="bold-font"> NAME </h5>
         <p> ARTIST </p>
    </div>
</div>


.column-wrapper-player {
    width:100%;
    height:100%;
    display: flex;
    flex-direction: row;
}

.column-left-player {
    width: 50px;
    height: 100%;
    flex-shrink: 0;  
}

.column-right-player {
    width: 100%;
}

如何使用自定义列实现模型布局？

编辑：我拥有所有必要的资产，包括按钮和滑块。我只需要弄清楚如何在列中正确、干净地对齐所有内容。

【问题讨论】：

标签： javascript html css bootstrap-4

【解决方案1】：

非常好的问题，我真的很喜欢这种布局。

我在这个布局上制作了一个完整的 Youtube 直播视频。请查看以下链接：

https://youtu.be/GKz6AH-e7FI

我也在 Stackoverflow 中添加了代码如果您有任何问题，请告诉我。

div.progress{height:3px;}
.volume-progress{width:100px;}
.play-icons{    margin-top: 2px;}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
<div class="container-fluid fixed-bottom bg-dark">
  <div class="row">
    <div class="col-3">
      <div class="media">
        <img src="https://organicthemes.com/demo/profile/files/2018/05/profile-pic.jpg" style="width:64px;height:64px" class="align-self-center mr-3" alt="...">
        <div class="media-body text-white">
          <h5 class="mt-0">Song name</h5>
          <p>Artist name</p>
        </div>
      </div>
    </div>
    <div class="col-6">
      <div class="play-icons text-white align-items-center d-flex justify-content-center">
        <i class="material-icons text-success">shuffle</i>
        <i class="material-icons ml-4">skip_previous</i>
        <i class="material-icons ml-4" style="font-size:40px">play_circle_outline</i>
        <i class="material-icons ml-4">skip_next</i>
        <i class="material-icons ml-4 text-success">repeat</i>
      </div>
      <div class="progress-block mt-1 text-white d-flex justify-content-between align-items-center">
        <div class="mr-2">0:00</div>
        <div class="progress w-100">
          <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <div class="mr-2">2:59</div>
      </div>
    </div>
    <div class="col-3 text-white d-inline-flex flex-row-reverse align-items-center">
      <div class="ml-2"> <i class="material-icons">open_in_full</i> </div>
      <div class="progress volume-progress">
          <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
       </div>
      <div class="ml-2"> <i class="material-icons">volume_down</i> </div>
      <div class="ml-2"> <i class="material-icons">queue_music</i> </div>      
      <div class="ml-2"> <i class="material-icons">playlist_play</i> </div>
        
          
            
    </div>
  </div>
</div>

【讨论】：