未顯示最后一個BootstrapRadio-Element-有解無憂

我有以下表格：

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel='stylesheet' href='..//styles/styles-scale1-ma.css' />
    
    <title>Title</title>
</head>
<body>
    <div class="container mt-5">
        <h1 class="display-5">Scale 1</h1>
        <h3 class="text-muted mb-5">Subtitle 1</h3>
        <div class="card">
            <div class="card-header">
              Item 1
            </div>
            <div class="card-body">
              <h5 class="card-title mb-4">Question</h5>
              <div class="form-check">
                    <input class="form-check-input" type="radio" name="scale1-ma" id="1-1-0" value="0">
                    <label class="form-check-label mb-3" for="1-1-0">
                    Answer 0
                    </label>
                    <input class="form-check-input" type="radio" name="scale1-ma" id="1-1-1" value="1">
                    <label class="form-check-label mb-3" for="1-1-1">
                        Answer 1
                    </label>
                    <input class="form-check-input" type="radio" name="scale1-ma" id="1-1-2" value="2">
                    <label class="form-check-label mb-3" for="1-1-2">
                        Answer 2
                    </label>
                    <input class="form-check-input" type="radio" name="scale1-ma" id="1-1-3" value="3">
                    <label class="form-check-label mb-3" for="1-1-3">
                        Answer 3
                    </label>
                    <input class="form-check-input" type="radio" name="scale1-ma" id="1-1-4" value="4">
                    <label class="form-check-label mb-3" for="1-1-4">
                        Answer 4
                    </label>
              </div>
            </div>
          </div>
    </div>
    

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <script src='../script.js'></script>
</body>
</html>

目前沒有腳本，但我使用 Bootstrap 作為樣式。我的問題是，最后一個 Radio 沒有出現。不過好像最后一個元素本身沒有問題。如果我洗掉它，第四個收音機也會出現同樣的問題。我忘記了什么？我用谷歌搜索，但似乎沒有人有同樣的問題。

謝謝，托比

uj5u.com熱心網友回復：

您可以在 Div 元素中嵌套輸入和標簽標簽。

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel='stylesheet' href='..//styles/styles-scale1-ma.css' />
    
    <title>Title</title>
</head>
<body>
    <div class="container mt-5">
        <h1 class="display-5">Scale 1</h1>
        <h3 class="text-muted mb-5">Subtitle 1</h3>
        <div class="card">
            <div class="card-header">
              Item 1
            </div>
            <div class="card-body">
              <h5 class="card-title mb-4">Question</h5>
              <div class="form-check">
        <div>
                    <input class="form-check-input" type="radio" name="scale1-ma" id="1-1-0" value="0">
                    <label class="form-check-label mb-3" for="1-1-0">
                    Answer 0
                    </label>
        </div>
        <div>
                    <input class="form-check-input" type="radio" name="scale1-ma" id="1-1-1" value="1">
                    <label class="form-check-label mb-3" for="1-1-1">
                        Answer 1
                    </label>
        </div>
        <div>
                    <input class="form-check-input" type="radio" name="scale1-ma" id="1-1-2" value="2">
                    <label class="form-check-label mb-3" for="1-1-2">
                        Answer 2
                    </label>
        </div>
        <div>
                    <input class="form-check-input" type="radio" name="scale1-ma" id="1-1-3" value="3">
                    <label class="form-check-label mb-3" for="1-1-3">
                        Answer 3
                    </label>
        </div>
                    <input class="form-check-input" type="radio" name="scale1-ma" id="1-1-4" value="4">
                    <label class="form-check-label mb-3" for="1-1-4">
                        Answer 4
                    </label>
              </div>
            </div>
          </div>
    </div>
    

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <script src='../script.js'></script>
</body>
</html>

uj5u.com熱心網友回復：

通過添加.form-check-inline到 any對同一水平行上的無線電進行分組.form-check。請在此處參考更多https://getbootstrap.com/docs/5.0/forms/checks-radios/#inline

您的單選按鈕代碼應如下所示。

<div class="form-check form-check-inline">
  <input type="radio" name="scale1-ma" id="1-1-0" value="0">
  <label class="form-check-label" for="1-1-0">Answer 0</label>
</div>
<div class="form-check form-check-inline">
  <input type="radio" name="scale1-ma" id="1-1-1" value="1">
  <label class="form-check-label" for="1-1-1">Answer 1</label>
</div>
<div class="form-check form-check-inline">
  <input type="radio" name="scale1-ma" id="1-1-2" value="2">
  <label class="form-check-label" for="1-1-2">Answer 2</label>
</div>
<div class="form-check form-check-inline">
  <input type="radio" name="scale1-ma" id="1-1-3" value="3">
  <label class="form-check-label" for="1-1-3">Answer 3</label>
</div>
<div class="form-check form-check-inline">
  <input type="radio" name="scale1-ma" id="1-1-4" value="4">
  <label class="form-check-label" for="1-1-4">Answer 4</label>
</div>

uj5u.com熱心網友回復：

要列出單選按鈕，只需將您的輸入放在 Div 屬性之間。這將為每個元素提供單選按鈕。這里我提供了代碼供您參考。

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel='stylesheet' href='..//styles/styles-scale1-ma.css' />
    
    <title>Title</title>
</head>
<body>
    <div class="container mt-5">
        <h1 class="display-5">Scale 1</h1>
        <h3 class="text-muted mb-5">Subtitle 1</h3>
        <div class="card">
            <div class="card-header">
              Item 1
            </div>
            <div class="card-body">
              <h5 class="card-title mb-4">Question</h5>
              <div class="form-check">
              <div>
                    <input class="form-check-input" type="radio" name="scale1-ma" id="1-1-0" value="0">
                    <label class="form-check-label mb-3" for="1-1-0">
                    Answer 0
                    </label>
                    </div>
                    <div>
                    <input class="form-check-input" type="radio" name="scale1-ma" id="1-1-1" value="1">
                    <label class="form-check-label mb-3" for="1-1-1">
                        Answer 1
                    </label>
                    </div>
                    <div>
                    <input class="form-check-input" type="radio" name="scale1-ma" id="1-1-2" value="2">
                    <label class="form-check-label mb-3" for="1-1-2">
                        Answer 2
                    </label>
                    </div>
                    <div>
                    <input class="form-check-input" type="radio" name="scale1-ma" id="1-1-3" value="3">
                    <label class="form-check-label mb-3" for="1-1-3">
                        Answer 3
                    </label>
                    </div>
                    <div>
                    <input class="form-check-input" type="radio" name="scale1-ma" id="1-1-4" value="4">
                    <label class="form-check-label mb-3" for="1-1-4">
                        Answer 4
                    </label>
                    </div>
              </div>
            </div>
          </div>
    </div>
    

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <script src='../script.js'></script>
</body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/380012.html

標籤：html bootstrap-5

上一篇：輸入字符React后輸入失去焦點

下一篇：如何從jsonstringify獲取特定的“密鑰”（我的情況）？