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

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

這篇文章主要介紹了Boostrap柵格系統(tǒng)與自己額外定義的媒體查詢的沖突問(wèn)題,非常不錯(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

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

768px

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

這里寫圖片描述

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

這里寫圖片描述

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

/* 超小屏幕（手機(jī)，小于 768px） */
/* 沒(méi)有任何媒體查詢相關(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)與自己額外定義的媒體查詢的沖突問(wèn)題，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！

您可能感興趣的文章:

相關(guān)文章

如何用JavaScript讓你的瀏覽器說(shuō)話
這篇文章主要介紹了如何用JavaScript讓你的瀏覽器說(shuō)話，對(duì)語(yǔ)音感興趣的同學(xué)，可以實(shí)驗(yàn)一下
2021-04-04
分享一款超好用的JavaScript 打包壓縮工具
這篇文章主要介紹了寫一個(gè)飛快的 JavaScript 打包壓縮工具，非常好用，本文給大家分享實(shí)現(xiàn)思路,需要的朋友可以參考下
2020-04-04
JavaScript正則表達(dá)式驗(yàn)證登錄實(shí)例
這篇文章主要為大家詳細(xì)介紹了JavaScript正則表達(dá)式驗(yàn)證登錄實(shí)例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-03-03
一篇文章掌握RequireJS常用知識(shí)
一篇文章掌握RequireJS常用知識(shí)，通過(guò)本文，你可以對(duì)模塊化開(kāi)發(fā)和AMD規(guī)范有一個(gè)較直觀的認(rèn)識(shí)，并詳細(xì)地學(xué)習(xí)RequireJS這個(gè)模塊化開(kāi)發(fā)工具的常見(jiàn)用法，感興趣的小伙伴們可以參考一下
2016-01-01
Js數(shù)組排序函數(shù)sort()介紹
本文給大家簡(jiǎn)單探討下Js數(shù)組排序函數(shù)sort()的用法和示例，有需要的小伙伴可以參考下。
2015-06-06
el-date-picker 如何限制選擇六個(gè)月內(nèi)的日期
這篇文章主要介紹了el-date-picker 如何限制選擇六個(gè)月內(nèi)的日期,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
2024-07-07
用于CSS代碼壓縮與格式化的javascript函數(shù)代碼
呵呵，發(fā)現(xiàn)只要幾行ＪＳ代碼就可實(shí)現(xiàn)css的壓縮與格式化，非常不錯(cuò)。
2009-12-12
javascript中alert()與console.log()的區(qū)別
我們?cè)谧鰆s調(diào)試的時(shí)候使用 alert 可以顯示信息，調(diào)試程序，alert 彈出窗口會(huì)中斷程序，如果要在循環(huán)中顯示信息，手點(diǎn)擊關(guān)閉窗口都累死。而且 alert 顯示對(duì)象永遠(yuǎn)顯示為[object ]。自己寫的 log 雖然可以顯示一些 object 信息，但很多功能支持都沒(méi)有 console 好
2015-08-08
Javascript中的for in循環(huán)和hasOwnProperty結(jié)合使用
當(dāng)檢測(cè)某個(gè)對(duì)象是否擁有某個(gè)屬性時(shí)，hasOwnProperty 是唯一可以完成這一任務(wù)的方法，在 for in 循環(huán)時(shí)，建議增加 hasOwnProperty 進(jìn)行判斷，可以有效避免擴(kuò)展本地原型而引起的錯(cuò)誤
2013-06-06
微信小程序表單彈窗實(shí)例
這篇文章主要為大家詳細(xì)介紹了微信小程序表單彈窗實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-07-07