Bootstrap的几个问题
Bootstrap的几个问题
提问于 2020-11-13 11:53:09
我正在开发一个网络音频播放器，而且我是新手。目前，我的球员看起来是这样的：
这是我的源代码：
<!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>我偶然发现了几个问题。
- The卷图标-它根据卷级别变化，但以“不好的方式”：
我怎么才能把它修好？
- Shrinking屏幕宽度-这是当我缩小窗口时发生的事情(我绘制了红色矩形以使问题更加清晰)：
如何将两个元素保存在同一行中？
编辑#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";
}
});回答 1
Stack Overflow用户
发布于 2020-11-16 11:26:14
通过向图标标记样式添加宽度属性，我最终成功地解决了#2问题：
<i id="icon-volume" class="fas fa-volume-down" style="text-align: justify; width: 18px;"></i>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64820418
复制相关文章
相似问题
腾讯云开发者
