bootstrap-切换开关显示为复选框

Question

我在 React 中有一个 ToggleSwitch 组件，它是我使用 bootstrap-toggle 制作的。但它显示为复选框而不是切换开关。关于如何使其工作的任何帮助？

ToggleSwitch.js

import React, { Component } from "react";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-toggle/css/bootstrap-toggle.css";

class ToggleSwitch extends Component {
  render() {
    return (
      <div className="toggle-switch">
        <input
          type="checkbox"
          data-toggle="toggle"
          data-on="Ready"
          data-off="Not Ready"
          data-onstyle="success"
          data-offstyle="danger"
        />
      </div>
    );
  }
}

export default ToggleSwitch;

Answer 1

调用 JavaScript 个文件的顺序可能有问题。

对于CSS调用必要的文件：

Bootstrap 4
Bootstrap4-切换

对于 JavaScript，按以下顺序调用文件：

jQuery 苗条
Bootstrap 4
Bootstrap4-切换

工作片段：

const element = (
  <div className="toggle-switch">
    <input
      type="checkbox"
      data-toggle="toggle"
      data-on="Ready"
      data-off="Not Ready"
      data-onstyle="success"
      data-offstyle="danger"
    />
  </div>
);

ReactDOM.render(
  element,
  document.getElementById('app')
);

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css" rel="stylesheet"/>

<div id="app"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js"></script>

Answer 2

我对 Bootstrap toggle buttons 也有类似的问题——显示了切换按钮，但也显示了复选框。 我尝试了接受的答案（确认了我的 Bootstrap CSS/JS 文件引用），但仍然没有用。

我的问题的根源最终是我有一个 自定义 CSS sheet 具有以下规则：

.form-group input {
  position: relative;
  z-index: 2;
}

...我的 切换按钮嵌套如下：

<div class="form-control">
  ...
    <input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
    <label class="btn btn-primary" for="btn-check">Single toggle</label>
  ...   
</div>

解决方案： 确保你没有任何 Bootstrap-overriding CSS 改变期望的规则！ 一旦我摆脱了那个压倒一切的 .form-control input CSS规则，它正常工作！

快速测试（看看是否有一个压倒一切的 CSS 规则是你的问题）： 将你的切换按钮放在任何其他 tags/classes 如果可以，看看它是否正常工作。

在我的例子中，一旦我把它从包含 class “form-control” 的 div 中移出，它就可以正常工作，所以它指出了我正确的方向——我知道这与我的习惯 CSS 规则有关！

如果快速测试失败： 您仍然可以覆盖 CSS 规则：

input
input[type="checkbox"]
...或输入标签中的 classes/id/names/other 属性之一（例如 class 或 id btn-check Bootstrap 切换按钮)

在其中一种情况下，即使将它放在其他 tags/classes 之外也不起作用，因此您仍应检查任何 custom/additional CSS rules/sheets 用于覆盖！

bootstrap-切换开关显示为复选框

bootstrap-toggle switch is showing up as a checkbox

javascript

toggle

togglebutton

bootstrap-4