引导复选框样式答案

【问题标题】：Bootstrap checkbox styling引导复选框样式
【发布时间】：2017-08-09 21:08:09
【问题描述】：

在引导文档中，例如http://getbootstrap.com/css/#forms，复选框样式略微圆润且微妙。

但是当我引用 bootstrap 3.3.7 css 并使用这个 html 时

<div class="checkbox">
    <label>
        <input type="checkbox" id="cancelled">
        Cancelled
    </label>
</div>

我的复选框看起来像标准的丑陋 HTML 复选框。

同样可以在这里看到https://codepen.io/mathumatix/pen/dzvQvg。我发现了这个问题Why checkbox style is not bootstrap style，它指出 Bootstrap 3.x 不包括复选框的样式。如果是这样，Bootstrap 文档中的复选框样式如何？使用未显示的自定义css？我也尝试使用 Bootstrap 4 alpha，但我仍然没有在复选框上获得任何样式。我所有的其他 UI 元素都有 Bootstrap 样式。我错过了什么？

【问题讨论】：

Customize Bootstrap checkboxes的可能重复

标签： css twitter-bootstrap-3

【解决方案1】：

原来是浏览器。 Chrome 使用带阴影和圆形框的本机绘制复选框，我错误地认为这是 Bootstrap 样式。 IE 和 Edge 绘制正方形。我使用 css found here 让它看起来像我想要的那样。

【讨论】：

【解决方案2】：

用你的代码制作小提琴，包括 Bootstrap.css

效果很好。也许某些外部代码或浏览器设置正在影响您的 CSS。

https://jsfiddle.net/1ca9ufku/

HTML：

<div class="checkbox">
    <label>
        <input type="checkbox" id="cancelled">
        Cancelled
    </label>
</div>

CSS：

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

Checkbox

【讨论】：