我想在網站表單中包含一個滑塊。我的代碼在這里：
<body>
<div style="background-color: #F1F1F1">
<div class="row">
</div>
<form action="/Beneficiary/Primary" method="post">
<label for="fader">Percentage</label>
<input type="range" min="0" max="100" value="50" id="fader" step="1" oninput="outputUpdate(value)">
<output for="fader" id="volume">50</output>
</form>
</div>
</body>
此代碼有效，可以在此處查看：https : //codepen.io/jonathn6/pen/qxMxBm
問題是當我包括
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
當包含此樣式表時，無需對任何 HTML 進行任何更改，<output>就會將其放置在<input>. 此外，滑塊的長度會擴展到整個頁面。
是否有可能在 bootstrap.min.css 檔案中的某處有一個默認 type=range 屬性強制 type=range 元素擴展到最大寬度？
知道如何解決這個問題嗎？
謝謝。
uj5u.com熱心網友回復：
我認為如果我在范圍型別輸入標記中使用此代碼，它將解決第二個問題：
<!-- ... -->
<input type="range" style="width: <width>" min="0" max="100" value="50" id="fader" step="1" oninput="outputUpdate(value)">
<!-- ... -->
寬度：任何 css 度量。
uj5u.com熱心網友回復：
您可以將元素放在容器中并為其指定寬度。在我正在開發的應用程式中，我將所有元素移動到應用<div>了customContainer類樣式的元素中。的customContainer類樣式的200像素的值分配給寬度欄位來設定width所述元件的。
/* Developed the following class style. */
.customContainer{
width: 200px;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<body>
<!-- The following item is plugin and customContainer class style is applied -->
<div class="customContainer">
<div style="background-color: #F1F1F1">
<div class="row"> </div>
<form action="/Beneficiary/Primary" method="post">
<label for="fader">Percentage</label>
<input type="range" min="0" max="100" value="50" id="fader" step="1" oninput="outputUpdate(value)">
<output for="fader" id="volume">50</output>
</form>
</div>
</div>
</body>uj5u.com熱心網友回復：
如果您剛剛開始您的專案，您可以使用 bootstrap 4，它可以開箱即用：
function outputUpdate(vol) {
document.querySelector('#volume').value = vol;
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
</head>
<body>
<div class="container">
<form action="/Beneficiary/Primary" method="post">
<div class="form-control">
<label for="fader">Percentage</label>
<input type="range" min="0" max="100" value="50" id="fader" step="1" oninput="outputUpdate(value)" />
<output for="fader" id="volume">50</output>
</div>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/406462.html
標籤：