4

我正在尝试将复选框变成Bootstrap Switch。它在 IE 中运行良好，但在 Chrome 中的样式不正确。怎么了？

如果我简单地从站点下载引导开关代码，它甚至会发生。在 vs 2013 中创建一个新的空 Web 应用程序添加整个内容并在浏览器中点击预览。（示例.html）

在铬的情况下同样的结果。

<html lang="en">
<head>
  <link href="content/template/css/bootstrap.min.css" rel="stylesheet">
  <link href="content/template/bootstrap-switch.css" rel="stylesheet">
</head>
<body>
  <input type="checkbox" name="my-checkbox" checked>
  <script src="Scripts/jquery-2.1.1.js"></script>
  <script src="scripts/js/bootstrap-switch.min.js"></script>
  <script>
     $(document).ready(function () {
        $("[name='my-checkbox']").bootstrapSwitch();
     });
  </script>
</body>
</html>

在此处输入图像描述

4

4 回答 4

6

我也有这个问题，运行 Chrome 47（当前最新）。我发现我的页面缩放级别设置为 90%。设置回 100% 缩放并刷新页面后，问题得到解决。

有趣的是，具有不同缩放级别的切换面板的样式宽度是不同的。

<span class="bootstrap-switch-handle-off">...
<span class="bootstrap-switch-label">...
<span class="bootstrap-switch-handle-on">...

在 90% 缩放时（出现问题），每个元素32px在我的渲染中都有一个宽度值，其中父容器 ( class="bootstrap-switch-container") 的最大宽度为93px

在 100% 缩放时，每个元素的宽度值为31px

于 2015-12-17T17:29:11.627 回答
0

我解决了强制使用初始宽度的问题，只需添加这个 css：

.bootstrap-switch-handle-off {
    width: 42px;
}
于 2018-09-05T20:15:21.907 回答
0

我遇到了一个类似的问题，我的引导开关样式看起来完全错误（拨动开关上方的额外空间），结果我的问题是我包含了错误引导版本的引导开关 css 和 js 文件。我的 Web 应用程序使用 bootstrap 3.3.7，我不小心将 bootstrap-switch 文件用于 bootstrap 2，而不是 3。一旦我交换了文件，一切都为我设置了正确的样式。

于 2017-12-10T01:40:35.673 回答
-1

我解决了这个问题：

/* To resolve bootstrap switch Chrome compatibility issue */
.bootstrap-switch-container {
    width: 48px;
}
于 2016-08-05T16:29:23.010 回答