半個屏幕寬度引導3隱藏要素

我在與引導3奇怪的錯誤，實質上降低了我的瀏覽器的寬度，以半屏的時候，有一個微小的幾乎1px的門檻，其中兩個隱藏XS和隱藏元素SM出現在屏幕上。有沒有什麼辦法可以通過讓隱藏x或隱藏sm元素中的任何一個隱藏起來而不是同時顯示這兩個元素來糾正這種情況？半個屏幕寬度引導3隱藏要素

我已經測試這個自舉的網站例如這裏http://bootstrapdocs.com/v3.0.3/docs/css/發現輔助類下>顯示和隱藏內容

Here is bootstrap's website example on half screen

一旦屏幕寬度由一個微小的量是半寬減少，下面的是顯示（對不起，我只能發佈一個鏈接）： ✔隱藏在x小（綠色）中（灰色） ✔隱藏在x小和小（綠色） ✔隱藏在x小和中綠色） ✔隱藏在x小和大（綠色）

<div class='col-xs-12'><div class='hidden-xs'>This content should be hidden on mobile only, but visible on everything else</div><div class='hidden-sm hidden-md hidden-lg'>This content should be hidden on everything apart from xs devices</div></div>

然而，當瀏覽器被降低到一半屏幕的寬度，兩個隱藏-XS元件和隱藏-SM，隱藏-MD隱藏-LG元件保留在屏幕上，直到寬度被減少或增加。（如，如果有在被一個xs或Sm元件所需要的寬度的間隙）

來源

2017-10-20 ojbx

您可以在這裏片斷添加代碼的一部分。 IT會顯示你的問題，並且將更容易從SO用戶那裏獲得幫助;）歡迎 –

嗨，歡呼聲。我不覺得有必要添加任何代碼，因爲我發現這是自舉本身，而不是我所編碼的，我很快就會附着的那種問題，我的一個例子的實際問題面對。 – ojbx

測試和研究更多一些......之後，我發現這個問題在這裏：https://stackoverflow.com/questions/42180675/bootstrap-layout-media-queries-not-working-at-767px-on-chrome，這是同樣的錯誤，但我已經嘗試瞭解決方案（重新安排媒體查詢，在實時網站上嘗試它等），但我仍然不幸得到任何地方，有沒有人有任何建議？ – ojbx

瞎搞一段時間後，我發現一種解決方案，但是首先，需要對問題的更好的解釋。

此問題只發生在每個元件的尺寸類的例如精確最大寬度xs，sm等僅在Google Chrome中使用。 Bootstrap開發人員意識到這個問題，但由於某種原因不準備採取行動。

如果你想隱藏-XS並不能在同一時間都顯示隱藏元素SM等，您需要更改每個隱藏類的媒體查詢的最大寬度有更多的精度例如hidden-xs，hidden-sm等等是max-width：* .99;

我已經提供瞭如下的例子：

@media only screen and (max-width: 767.99px) { 
    .hidden-xs { 
     display: none; 
    } 
} 

@media only screen and (min-width: 768px) and (max-width: 991.99px) { 
    .hidden-sm { 
     display: none; 
    } 
} 

@media only screen and (min-width: 992px) and (max-width: 1199.99px) { 
    .hidden-md { 
     display: none; 
    } 
} 

@media only screen and (min-width: 1200px) { 
    .hidden-lg { 
     display: none; 
    } 
}

來源

2017-10-21 09:52:39 ojbx

半個屏幕寬度引導3隱藏要素

回答

相關問題