ブートストラップ・チェック・ボックス・スタイリング

Question

ブートストラップ・ドキュメントでは、例えばhttp://getbootstrap.com/css/#formsのチェック・ボックスのスタイルはやや丸く、微妙です。

しかし、私は、ブートストラップ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にはチェックボックスのスタイリングが含まれていません。そうであれば、チェックボックスはどのようにブートストラップ文書にスタイルが入っていますか？表示されていないカスタムCSSを使用していますか？私もBootstrap 4アルファを使ってみましたが、まだチェックボックスにスタイリングがありません。他のすべてのUI要素には、ブートストラップスタイルがあります。私は何が欠けていますか？

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

は、それがブラウザで判明。クロムは、チェックボックスをネイティブに、私が誤ってブートストラップのスタイリングであると信じていた、丸で囲まれたボックスで描きます。 IEとEdgeが四角形を描画します。私はどのように見えるようにするために、hereが見つかりました。