Bootstrap 的一些问题答案

【问题标题】：Some issues with BootstrapBootstrap 的一些问题
【发布时间】：2021-02-25 10:22:20
【问题描述】：

我正在开发一个网络音频播放器，而且我是 Bootstrap 的新手。目前，我的播放器如下所示：

这是我的源代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>wavesurfer - Intro</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
</head>
<body>

<div class="container-fluid">

    <!-- Waveform -->
    <div id="waveform"></div>

    <!-- Progress -->
    <div class="row">
            <div id="progress" class="col-md-6">Loading audio...</div>
            <div id="duration" class="col-md-6" style="text-align: right;"></div>
    </div>

    <br>


    <div class="row">

        <!-- Backward 5 s -->
        <button id="bwd" class="col-md-3" type="button" disabled="disabled">
            <i class="fa fa-backward"></i>
            <div>Backward 5 s</div>
        </button>

        <!-- Play/Pause -->
        <button id="btn-play-pause" class="btn btn-primary col-md-4" type="button" disabled="disabled">
            <i id="icon-play-pause" class="fa fa-play"></i>
            <div id="text-play-pause">Play</div>
        </button>

        <!-- Forward 5 s -->
        <button id="fwd" class="col-md-3" type="button" disabled="disabled">
            <i class="fa fa-forward"></i>
            <div>Forward 5 s</div>
        </button>

        <!-- Stop -->
        <button id="btn-stop" class="col-md-2" type="button" value="Stop" disabled="disabled">
            <i class="fa fa-stop"></i>
            <div>Stop</div>
        </button>
    </div>


    <br>

    <div class="row">
        <div class="col-md-6">
            <!-- Audio rate -->
            <i class="fas fa-tachometer-alt"></i>
            <input id="audio-rate" type="range" min="0.25" max="2" value="1" step="0.25">
            <div id="audio-rate_value" style="display: inline;">1x</div>
        </div>
        <div class="col-md-6" style="text-align: right;">
            <!-- Volume -->
            <i id="icon-volume" class="fas fa-volume-down"></i>
            <input id="volume" type="range" min="0" max="2" value="1" step="0.1">
        </div>


    </div>



    <div class="row">
        <div class="col-md-6">
            <!-- Loop -->
            <button id="loop" class="btn btn-outline-primary">Loop</button>
        </div>
        <div class="col-md-6" style="text-align: right;">
            <!-- Low-pass filter -->
            <button id="lowpass-filter" class="btn btn-outline-primary">Low-pass filter</button>
        </div>
    </div>


</div>

<script src="bundle.js"></script>
</body>
</html>

我偶然发现了几个问题。

音量图标 - 它会根据音量级别而变化，但以“不好的方式”：

我怎样才能让它保持不变？
缩小屏幕宽度 - 这是我缩小窗口时发生的情况（我绘制了红色矩形以使问题更清晰）：如何将两个元素保留在同一行中？

EDIT #1 - 这是更改音量图标的代码：

var controls = {
...
volume: document.getElementById("volume"),
...
}

controls.volume.addEventListener("input", function () {
let volume = controls.volume.value;
wavesurfer.setVolume(volume);

// Change volume icon
document.getElementById("icon-volume").classList = "";
if(volume == 0){
    document.getElementById("icon-volume").classList = "fas fa-volume-off";
}
else if (volume > 0 && volume <= 1){
    document.getElementById("icon-volume").classList = "fas fa-volume-down";
}
else{
    document.getElementById("icon-volume").classList = "fas fa-volume-up";
}
});

【问题讨论】：

嗨。如何在“文本对齐”中同时指定左对齐和对齐（如果这是要设置的属性）？
不，它没有。顺便说一句，这是音量 div，而不是速度。
你能告诉我们改变音量图标的代码吗？
我已经解决了对齐问题。要解决音量图标问题，您需要提供您尝试过的代码。所以我可以看看有什么问题
“坏方法”是什么意思？

标签： html web bootstrap-4

【解决方案1】：

我最终通过将宽度属性添加到图标标签样式来解决问题 #2：

<i id="icon-volume" class="fas fa-volume-down" style="text-align: justify; width: 18px;"></i>

【讨论】：