Jquery 引导开关变得又大又丑。为什么？_Jquery_Html_Css_Twitter Bootstrap_Toggle

Jquery 引导开关变得又大又丑。为什么？

jquery html css twitter-bootstrap

Jquery 引导开关变得又大又丑。为什么？,jquery,html,css,twitter-bootstrap,toggle,Jquery,Html,Css,Twitter Bootstrap,Toggle,我尝试将引导切换复选框（）添加到我的网站。但当我加上它时，它变得又大又丑（见）此外，我使用： JQuery v。3.3.1，引导v。4.1.3和引导开关v。2.2.0 本地python服务器铬下面是HTML结构我做错了什么 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=de

我尝试将引导切换复选框（）添加到我的网站。但当我加上它时，它变得又大又丑（见）

此外，我使用：

JQuery v。3.3.1，引导v。4.1.3和引导开关v。2.2.0
本地python服务器
铬
下面是HTML结构

我做错了什么

 <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <link rel="stylesheet" href="/bootstrap.min.css">
 <link rel="stylesheet" href="/bootstrap-toggle.min.css">
 <title>Test</title>
</head>

<body>
 <input type="checkbox" checked data-toggle="toggle">
</body>

<script src="/jquery.min.js"></script>
<script src="/bootstrap.min.js"></script>
<script src="/bootstrap-toggle.min.js"></script>

</html>


试验

更新：问题已解决。它与屏幕分辨率有关。当在低分辨率的屏幕上本地主机上渲染时，按钮会变大、变丑，但在高分辨率的屏幕上效果很好

如果使用外部链接和Bootstrap v3.3.7，这将非常有效：


试验

右键单击复选框元素并查看关联的CSS。您可能需要删除或覆盖其他CSS干扰。如果您需要此社区的帮助，请使用堆栈溢出代码片段或JSFIDLE或类似工具重现此问题。这是因为CSS覆盖问题。您可以通过检查元素来修复它。或者请提供工作JSFIDLE或codepen链接来帮助您。谢谢您的帮助。是的，CSS被覆盖了。实际上，问题与屏幕分辨率有关。如果我在高分辨率的屏幕上运行我的网站，切换效果会非常好，但不是在低分辨率的屏幕上…谢谢你的帮助。实际上，问题与屏幕分辨率有关。如果我在高分辨率的屏幕上运行我的网站，切换效果会非常好，但在低分辨率的屏幕上则不会