引导切换开关显示为复选框

Question

我在反应中有一个 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 调用必要的文件：

• 引导程序 4
• Bootstrap4-切换

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

• jQuery 瘦身
• 引导程序 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 切换按钮也有类似的问题——显示切换按钮，但也显示复选框。 我尝试了接受的答案（确认了我的 Bootstrap CSS/JS 文件引用），但它仍然没有用。

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

.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 覆盖 CSS 规则！ 一旦我摆脱了那个压倒一切.form-control input CSS 规则，它就可以正常工作了！

快速测试（查看覆盖 CSS 规则是否是您的问题）：如果可以，将您的切换按钮放在任何其他标签/类之外，看看它是否正常工作。

• 就我而言，一旦我将它从包含 class“表单控件”的 div 中移出，它就可以正常工作，从而为我指明了正确的方向——我知道这与我的自定义 CSS 规则有关！

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

• input
• input[type="checkbox"]
• ...或输入标签中的类/id/名称/其他属性之一（例如 class 或 id btn-check用于 Bootstrap 切换按钮）

在其中一种情况下，即使将它放在其他标签/类之外也不起作用，因此您仍应检查任何自定义/附加 CSS 规则/表以进行覆盖！