引导复选框样式

Question

在引导文档中，例如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样式。我错过了什么？

Answer 1

使用您的代码并包括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

Answer 2

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