クロム・インスペクタでブートストラップ・ブレークポイントが正しく機能していませんか？

Question

編集：私は私の元の投稿で十分に明確であるとは思わないので、私はこの質問を完全に書き換えています。

次のようにブートストラップのウェブサイトによると、列の各カテゴリのブラウザの幅は次のようになります。要するに

// Extra small devices (portrait phones, less than 576px) 
// No media query since this is the default in Bootstrap 

// Small devices (landscape phones, 576px and up) 
@media (min-width: 576px) { ... } 

// Medium devices (tablets, 768px and up) 
@media (min-width: 768px) { ... } 

// Large devices (desktops, 992px and up) 
@media (min-width: 992px) { ... } 

// Extra large devices (large desktops, 1200px and up) 
@media (min-width: 1200px) { ... } 

// Extra small devices (portrait phones, less than 576px) 
@media (max-width: 575px) { ... } 

// Small devices (landscape phones, less than 768px) 
@media (max-width: 767px) { ... } 

// Medium devices (tablets, less than 992px) 
@media (max-width: 991px) { ... } 

// Large devices (desktops, less than 1200px) 
@media (max-width: 1199px) { ... } 

// Extra large devices (large desktops) 
// No media query since the extra-large breakpoint has no upper bound on its width 

を：COL-XLは1200個のピクセル、最大で、LGは、MD、992から1199の間にあります768-991、smは576-768、xsは575までです。

私の問題は、私のウェブページは、xsがsm、smがmd、mdがlg、lgがxl。グーグルクロームインスペクタで

見るこのcodepen：https://codepen.io/colesam/full/YxjVwW/

あり、LGの行ごとに3つの項目であるべきで、アップ、SMとMDは行ごとに2であるべきであり、XSは1

を参照してくださいする必要があります以下に2つの例：

EDIT 2：

：私のヘッダーは次のメタタグを含みます

編集3：私は今、2つの別々のコンピュータでページを検査しようとしましたが、私は同じ結果を得ています。私もブートストラップを更新しましたが、役に立たない。なぜこれが起こっているのか、私は本当に非常に困惑しています。私はhtmlにxlカラムを追加しようとしましたが、画面サイズの大きさにかかわらず、xlカラムはアクティブ化されませんでした。

次は、Google Chromeのインスペクタツールのイメージです。それは.COL-MD-は*我々は、LGの列の範囲内であっても活性化されることを示しています。

Answer 1

それは私が、バージョン3.3.7を使用しているとき、私はブートストラップのV4 +のためのブレークポイントを見ていたが判明しました。

ブートストラップ4の場合、すべてのブレークポイントがcol-xl- *のためのスペースを作るようにシフトされました。

ブートストラップ3ブレークポイントは以下のとおりです。[DotNetNukeのとブートストラップ応答設計作業を行うことができません]の

/* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) { 

} 

/* Small Devices, Tablets */ 
@media only screen and (min-width : 768px) { 

} 

/* Medium Devices, Desktops */ 
@media only screen and (min-width : 992px) { 

} 

/* Large Devices, Wide Screens */ 
@media only screen and (min-width : 1200px) { 

} 

Answer 2

ブートストラップは、携帯-最初なので、

グリッドの

.col-xs-* 
@media (min-width: 768px) { 
    .col-sm-* 
} 
@media (min-width: 992px) { 
    .col-md-* 
} 
@media (min-width: 1200px) { 
    .col-lg-* 
} 

（colがあります - *）クラス の代わり

@media (max-width: 575px) { ... } 
@media (max-width: 767px) { ... } 
@media (max-width: 991px) { ... } 
@media (max-width: 1199px) { ... }