快捷導(dǎo)航

Boostrap柵格系統(tǒng)與自己額外定義的媒體查詢的沖突問題

更新時(shí)間：2017年02月19日 13:51:34 作者：sinat_27088253

這篇文章主要介紹了Boostrap柵格系統(tǒng)與自己額外定義的媒體查詢的沖突問題,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

html結(jié)構(gòu)如下

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

我想要實(shí)現(xiàn)的效果是在屏幕寬度大于768時(shí)，1111左對(duì)齊，2222右對(duì)齊，小于等于768時(shí)居中對(duì)齊。于是我又額外寫了媒體查詢

@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;
  }
}

最終展示類似下圖

大于768px

小于768px

看起來一切正常，但是卻在臨界點(diǎn)768px時(shí)出現(xiàn)了問題,如圖

768px

打開控制臺(tái)，會(huì)發(fā)現(xiàn)右邊的兩個(gè)圖標(biāo)的樣式確實(shí)使用了text-align:center;,但是為什么展示出來呈現(xiàn)不一樣的效果呢

這里寫圖片描述

原因在于父級(jí)定義的柵格系統(tǒng)，查看.text-right的父級(jí)div，會(huì)發(fā)現(xiàn)它所占的寬度為50%

這里寫圖片描述

因此在屏幕寬度為768px時(shí)，既有自己定義的樣式，也有原來柵格系統(tǒng)的樣式，所以導(dǎo)致混亂，根本原因在于沒注意柵格系統(tǒng)的實(shí)質(zhì)

/* 超小屏幕（手機(jī)，小于 768px） */
/* 沒有任何媒體查詢相關(guān)的代碼，因?yàn)檫@在 Bootstrap 中是默認(rèn)的（還記得 Bootstrap 是移動(dòng)設(shè)備優(yōu)先的嗎？） */
/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }
/* 中等屏幕（桌面顯示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }
/* 大屏幕（大桌面顯示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }

柵格系統(tǒng)是用min-width定義的，為大于等于，而我們額外定義的媒體查詢用的是max-width,為小于等于，剛好有一個(gè)768px的重合，導(dǎo)致最終樣式混亂。

解決辦法：

去除交集，自己定義媒體查詢時(shí)，定義max-width:767px

以上所述是小編給大家介紹的Boostrap柵格系統(tǒng)與自己額外定義的媒體查詢的沖突問題，希望對(duì)大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！

您可能感興趣的文章: