如何基於Bootstrap媒體查詢斷點來隱藏/刪除類？

我只想問是否可以根據設備的屏幕顯示/隱藏課程？我正在使用引導程序默認媒體查詢。我有這個默認設置：如何基於Bootstrap媒體查詢斷點來隱藏/刪除類？

/* Bootstrap Media Query Breakpoints 

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {...} 

/* Extra Small Devices, Phones equivalent to class xs */ 
@media only screen and (min-width : 480px) {...} 

/* Small Devices, Tablets equivalent to class sm */ 
@media only screen and (min-width : 768px) {...} 

/* Medium Devices, Desktops equivalent to class md */ 
@media only screen and (min-width : 992px) {...} 

/* Large Devices, Wide Screens equivalent to class lg */ 
@media only screen and (min-width : 1200px) {...}

我有這樣一個DIV：

<div class="col-xs-12 ol-sm-6 col-md-6"> 

    <div class="pull-right"> 

    <ul class="header_links"> 
     <li> 
     <a href="#">Member</a> 
     </li> 
     <li> 
     <a href="#">Login</a> 
     </li> 
     <li> 
     <a href="#">Member Registration</a> 
     </li> 
     <li> 
     <a href="#">Help</a> 
     </li> 
     <li> 
     <a href="#">Cart: 0</a> 
     </li> 
    </ul> 

    <ul class="social_media_links"> 
     <li> 
     <a href="#"> 
      <i class="fa fa-facebook-square"></i> 
     </a> 
     </li> 
     <li> 
     <a href="#"> 
      <i class="fa fa-tumblr-square"></i> 
     </a> 
     </li> 
    </ul> 

    </div> 
    <div class="clearfix"></div> 

</div>

我要的是，如果媒體查詢是在COL-XS-＃類拉-right將被隱藏或刪除。它可能在引導？

來源

2014-11-25 Jerielle

理解引導，最好的辦法是打開unminified CSS。在.pull-left，.pull-right和所有實用程序類（響應實用程序除外）的情況下，它們適用於所有視口大小。如果你將.pull-right和hidden-xs結合在同一個元素上

Christina 2014-11-25 03:41:09

Bootstrap具有內置的實用程序類，用於隱藏\根據視口顯示內容。

http://getbootstrap.com/css/#responsive-utilities

.visible-xs-*和.hidden-xs（* =塊，內嵌塊或內嵌）

編輯

您將無法覆蓋.pull-right，因爲它使用!important，和它只適用一個規則（float: right;），所以它很容易重新創建爲自定義類。

.pull-right-custom { 
    float: right; 
} 

@media only screen and (max-width : 480px) { 
    .pull-right-custom { 
     float: none; 
    } 
}

編輯＃2

如果你想保持與引導的移動先行的性質，它應該是這樣的..在sm將表明其對上sm或更大的視口拉（對於語義）。

.pull-right-sm { 
    float: none; 
} 

@media only screen and (min-width : 480px) { 
    .pull-right-sm { 
     float: right; 
    } 
}

來源

2014-11-25 03:37:54 Schmalzy

這是分割內容。但我想使用斷點訪問類名 – Jerielle 2014-11-25 03:40:50

這些實用程序只控制元素的可見性 - 它們無法在原始帖子請求時從內部div添加或刪除「拉 - 右」類。您需要使用其他答案中概述的自定義媒體查詢，或者使用javascript/jquery進行管理，但媒體查詢方法更容易。 – 2014-11-25 03:45:11

@Jerielle我最近的更新稍微好一些（移動優先和語義更多），所以我會使用那個。 – Schmalzy 2014-11-25 04:04:44

隱藏或刪除是不可能的，但可以改變它的方式將被渲染

@media只有屏幕和（最大寬度：480像素）{.pull右{浮動：無;} }

所以，通過這種方式，在所有介質屏幕小於480px的情況下，該類將不會使用float：right進行渲染。

來源

2014-11-25 03:40:54

'visible-xs'是一個更好的解決方案，因爲它是由bootstrap本身提供的。但是，您的答案似乎是一個獨特的解決方案。 – nightgaunt 2014-11-25 03:46:36

'.pull-right'類有'！important'應用於它，所以你將無法覆蓋它。 – Schmalzy 2014-11-25 03:49:42

謝謝。這就是我現在所想的。所以我可以移除這個類的唯一方法是根據我需要的斷點來改變它的主CSS。 – Jerielle 2014-11-25 03:49:50

我認爲正確的方法是使用Bootstrap的responsive utilities。

看看在source code of visibility mixins definition作爲參考，你可以用它們來擴展自己的類，如：

/* make sure that you've imported Bootstrap */ 
@import "bootstrap/less/bootstrap.less"; 

.pull-right-custom { 
    .pull-right; /* to make element behave exactly like .pull-right; */ 
    .visible-xs-block; /* to make element visible only on extra-small screens, etc... */ 
}

或者，如果你使用預編譯或引導的一些CDN共享版本，只是添加這個類直接到HTML這樣的：

<div class="pull-right visible-xs-block"> 
    ... 
</div>

來源

2015-08-03 21:51:19

如何基於Bootstrap媒體查詢斷點來隱藏/刪除類？

回答

相關問題