Conflict problem between Boostrap grid system and additional media queries defined by yourself

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 when the screen width is greater than768at1111Aligns to the left,2222Aligns to the right, less than or equal to768Aligns to the center. 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 it is at the critical point768px there is a problem, as shown in the figure

Open the console and you will find that the style of the two icons on the right indeed uses text-align:center;, but why does the display show a different effect

The reason is that the parent level defines the grid system, and check .text-The parent div of the right div, and you will find that it occupies a width of50%

Therefore, when the screen width is768px, there is both the style defined by yourself and the style of the original grid system, so it leads to confusion, the fundamental reason lies in not paying attention to the essence of the grid system

/* Extra small screen (phone, less than 768px) */
/* There is no code related to media queries, because this is the default in Bootstrap (remember that Bootstrap is mobile-first, right?) */
/* Small screen (tablet, greater than or equal to 768px) */
@media (min-width: @screen-sm-min) { ... }
/* Medium screen (desktop monitor, greater than or equal to 992px) */
@media (min-width: @screen-md-min) { ... }
/* Large screen (large desktop monitor, greater than or equal to 1200px) */
@media (min-width: @screen-lg-min) { ... }

The grid system uses min-width defined, for greater than or equal to, while the additional media query we define uses max-width, for less than or equal to, there is exactly one768px overlap, causing the final style to be confused.

Solution:

To remove the intersection, define max when defining the media query by yourself-width:767px

The above-mentioned is the conflict problem of Bootstrap grid system and the additional media query defined by the editor introduced to everyone, hoping it will be helpful to everyone. If you have any questions, please leave a message for me, and the editor will reply to everyone in time!

Statement: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (When sending an email, please replace # with @ to report abuse, and provide relevant evidence. Once verified, this site will immediately delete the suspected infringing content.)