Question

我尝试在我的网站上添加一个引导切换复选框（http://www.bootstraptoggle.com/）。但是，当我添加它时，它变得又大又丑陋（请参阅picture of my toggle and its appearance.）。

此外，我使用：

JQuery版本3.3.1，Bootstrap版本4.1.3和Bootstrap-toggle版本2.2.0
本地python服务器。
Chrome。
下面的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>

更新：问题已解决。它与屏幕分辨率有关。当在分辨率较低的屏幕上的localhost上呈现时，按钮会变得又大又丑，但在分辨率较高的屏幕上会很好地工作。

Answer 1

如果您使用外部链接和Bootstrap v3.3.7，则效果很好：

<!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 href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
 <title>Test</title>
</head>

<body>
 <input type="checkbox" checked data-toggle="toggle">
</body>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
</html>

Bootstrap切换变得很大且难看。为什么？

1 个答案: