快捷導(dǎo)航

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

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

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

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>

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

@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

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

768px

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

這里寫圖片描述

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

這里寫圖片描述

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

/* 超小屏幕（手機，小于 768px） */
/* 沒有任何媒體查詢相關(guān)的代碼，因為這在 Bootstrap 中是默認的（還記得 Bootstrap 是移動設(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,為小于等于，剛好有一個768px的重合，導(dǎo)致最終樣式混亂。

解決辦法：

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

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

您可能感興趣的文章: