Problema di conflitto tra il sistema di griglia Bootstrap e le query di media personalizzate

The HTML structure is as follows

<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>

I want to achieve the effect that when the screen width is greater than 768, 1111 is aligned to the left, 2222 is aligned to the right, and centered when the width is less than or equal to 768. So I wrote an additional media query

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

The final display is similar to the following figure

It looks normal, but there is a problem at the critical point of 768px, as shown in the figure

Open the console and you will find that the styles of the two icons on the right indeed use text-align:center;, but why do they show different effects

The reason lies in the grid system defined by the parent level. By checking the parent div of .text-right, you will find that it occupies a width of 50%

Therefore, when the screen width is 768px, there are both styles defined by yourself and the original grid system style, which leads to confusion. The fundamental reason lies in not paying attention to the essence of the grid system

/* Super small screen (mobile, less than 768px) */
/* Non ci sono codici relativi alle query media, perché questo è predefinito in Bootstrap (ricordate che Bootstrap è ottimizzato per dispositivi mobili?). */
/* Schermi piccoli (tablet, >= 768px) */
@media (min-width: @screen-sm-min) { ... }
/* Schermi medi (monitor desktop, >= 992px) */
@media (min-width: @screen-md-min) { ... }
/* Schermi grandi (monitor desktop, >= 1200px) */
@media (min-width: @screen-lg-min) { ... }

Il sistema di griglia è definito con min-width, che significa maggiore o uguale a, mentre le query media personalizzate che abbiamo definito utilizzano max-width, che significa minore o uguale a, c'è una sovrapposizione di 768px, che porta a uno stile finale confuso.

Soluzione:

Rimuovendo l'intersezione, quando si definisce una query media personalizzata, definire max-width:767px

Come descritto dall'autore, il problema di conflitto tra il sistema di griglia di Boostrap e le query media personalizzate, speriamo che questo sia utile a tutti voi. Se avete qualsiasi domanda, lasciate un commento, l'autore risponderà tempestivamente!

Dichiarazione: il contenuto di questo articolo è stato tratto da Internet, il copyright spetta ai rispettivi proprietari, il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, questo sito non detiene il diritto di proprietà, non è stato elaborato manualmente e non assume alcuna responsabilità legale correlata. Se trovi contenuti sospetti di violazione del copyright, ti preghiamo di inviare un'e-mail a: notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare, fornendo prove pertinenti. Una volta verificata, questo sito eliminerà immediatamente i contenuti sospetti di violazione del copyright.