包含带有 js 的 Bootstrap 类

Question

作为练习，我正在创建一个不使用 jQuery 的简单测验应用程序。我正在尝试使用 javascript 添加单选按钮作为答案选项

html正文如下

<div class="row">
    <div class="col-md-6 col-md-offset-3">
        <p id="question"></p>
        <form name="answers">
            <fieldset class="form-group">
                <div class="form-check" id="answersId">
                </div>
            </fieldset>
        </form>
    </div>
</div>

我下面的 js 脚本会在 div class="form-check" 中添加单选按钮

function firstQuestion() {

        var answerSection = document.getElementById("answersId");

        for(var i = 0; i < allQuestions[0].choices.length; i++) {
            var radioElement = [];
            radioElement[i] = document.createElement("input");
            radioElement[i].setAttribute("class", "form-check-input");
            radioElement[i].setAttribute("type", "radio");
            radioElement[i].setAttribute("name", "choice");
            radioElement[i].setAttribute("value", i);

            var label = [];
            label[i] = document.createElement("label");
            label[i].setAttribute("class", "form-check-label");

            var labelText = [];
            labelText[i] = document.createTextNode(allQuestions[0].choices[i]);

            label[i].appendChild(radioElement[i]);

            label[i].appendChild(labelText[i]);

            answerSection.appendChild(label[i]);
        };
    }

我无法获得引导程序外观，即：

-每个单选按钮都是内联的，而不是新行（垂直排列）

-按钮和标签之间的间距不像引导示例

为什么会这样？有人能指点我吗？

Answer 1

var answerSection = document.getElementById("answersId");
var radioElement = [];
var label = [];
var labelText = [];
var span;
for (i = 1; i < 4; i++) {
  span = document.createElement("span");
  span.setAttribute("style", "padding:15px");
  radioElement[i] = document.createElement("input");
  radioElement[i].setAttribute("class", "form-check-input");
  radioElement[i].setAttribute("type", "radio");
  radioElement[i].setAttribute("name", "choice");
  radioElement[i].setAttribute("value", i);
  label[i] = document.createElement("label");
  label[i].setAttribute("class", "form-check-label");
  labelText[i] = document.createTextNode("choice " + i);
  label[i].appendChild(radioElement[i]);
  label[i].appendChild(labelText[i]);
  span.appendChild(label[i]);

  answerSection.appendChild(span);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-md-6 col-md-offset-3">
    <p id="question"></p>
    <form name="answers">
      <fieldset class="form-group">
        <div class="form-check" id="answersId">
        </div>
      </fieldset>
    </form>
  </div>
</div>

您应该添加这 3 行以使引导程序正常工作。这些是 CDN 链接，但如果您的计算机上有这些链接，请正确添加它们

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

正如@leccionesonline bootstrap.min.js 所说，需要 jquery.min.js 文件。因此，您应该在 bootstrap.min.js 之前加载 jquery.min.js

这里是参考link

Answer 2

那是因为 bootstrap 依赖于 jquery，所以你不能期望 bootstrap 没有 jquery 也能工作