チェックボックスボタングループ内の隣接するアクティブなボタンの重なり合ったボックスシャドウ

Question

https://getbootstrap.com/docs/4.0/components/buttons/#checkbox-and-radio-buttonsで提供されている例の隣接するボタンをトグル（アクティブ）にすると、ボックスシャドウがボタン間で重なります。

各ボタンのボックスシャドウは単純です：

box-shadow: 0 0 0 0.2rem rgba(134,142,150,.5) 

は、我々はこれを防ぐことができる方法はありますか？特に2つ以上のボタンが隣接している場合は、壊れて見えます。

Answer 1

あなたはボックスの影がある一貫した色に重なるようにしたい場合は、以下の操作を行うことができます

box-shadow: 0 0 0 0.2rem rgb(194,198,202)

あなたはボックスの影が重なってしたくない場合は、次のことができます。

https://codepen.io/anon/pen/KyabMm：それをやって が

.btn-secondary:not([disabled]):not(.disabled).active { 
    box-shadow: 
    0 -0.2rem rgba(134,142,150,.5), 
    0 0.2rem rgba(134,142,150,.5); 
} 

label.btn-secondary:not([disabled]):not(.disabled).active:first-child { 
    box-shadow: 
    -0.2rem 0 0 0.2rem rgba(134,142,150,.5); 
} 

label.btn-secondary:not([disabled]):not(.disabled).active:last-child { 
    box-shadow: 
    0.2rem 0 0 0.2rem rgba(134,142,150,.5); 
}