Boostrapグリッドシステムと独自に定義したメディアクエリの衝突問題

HTML構造は以下の通りです

<div class="row">
  <div class="col-sm-6 col-xs-12">
    <p class="text-left one">
      1111
    </p>
  </div>
  <div class="col-sm-6 col-xs-12">
    <p class="text-right two">
      2222
    </p>
  </div>
</div>

私が実現したい効果は、スクリーン幅が768時、1111左に配置される、2222右に配置される、そして、768時は中央に配置されます。そこで、私は追加のメディアクエリを書きました

@media (max-幅: 768px) {
  .container-fluid .row p{
    color: #fff;
    font-size: 16px;
    text-align: center;
    line-height: 30px;
  }
  .row .text-left{
    margin-top: 20px;
  }
}

最終的には以下のような表示になります

見た目は正常に見えますが、境界点で768pxで問題が発生しました、図のように

コンソールを開くと、右側の2つのアイコンのスタイルが実際にtextを使用していることがわかります-中央に整列させていますが、なぜ表示される効果が異なるのでしょうか

理由は、親のグリッドシステムの定義が原因です。.textの確認を行ってください。-rightの親のdivを見ると、占める幅が50%

したがって、スクリーン幅が768pxの時、独自に定義したスタイルと元のグリッドシステムのスタイルが両方ありますため、混乱が生じます。根本原因は、グリッドシステムの本質に注意を払っていないことです。

/* 超小画面（スマートフォン、小于 768px） */
/* メディアクエリに関連するコードは一切ありません。なぜなら、Bootstrapではデフォルトで設定されているからです（Bootstrapはモバイルデバイス優先ではありませんか？） */
/* 小画面（タブレット、大于等于 768px） */
@media (min-幅: @screen-sm-min) { ... }
/* 中画面（デスクトップモニタ、大于等于 992px） */
@media (min-幅: @screen-md-min) { ... }
/* 大画面（デスクトップモニタ、大于等于 1200px） */
@media (min-幅: @screen-lg-min) { ... }

グリッドシステムはminを使用しています。-幅が定義されているため、私たちが独自に定義したメディアクエリはmaxを使用しています。-幅,が小于等于のとき、たまたま768ピクセルの重複が生じ、最終的なスタイルが混乱する原因となります。

解決策：

重複を取り除き、独自にメディアクエリを定義する場合、max-幅:767ピクセル

以上は編集者が皆さんに紹介したBootstrap グリッドシステムと独自に定義したメディアクエリの競合問題です。皆さんの助けになれば幸いです。何かご不明な点があれば、コメントを残してください。編集者はすぐに回答します。

声明：本文の内容はインターネットから収集され、著作権者に帰属します。インターネットユーザーにより自発的に貢献し、自己でアップロードされたものであり、本サイトは所有権を有しないです。また、人工的な編集処理も行われていません。著作権に関する問題が見つかった場合は、メールを送信していただければ幸いです：notice#oldtoolbag.com（メールを送信する際には、#を@に置き換えてください。通報を行い、関連する証拠を提供してください。一旦確認がとりたいとされると、本サイトは即座に侵害される疑いのあるコンテンツを削除します。）