使用Bootrap如何在兩個不同的媒體查詢中使用兩個不同的col-sm- *類？

Question

在我的應用程序有兩種不同尺寸小媒體查詢

@media only screen and (min-width : 480px)和@media only screen and (min-width : 320px)

但我想320px的寬度與col-sx-6類使用col-xs-12和大小480像素？

這裏是我的HTML

<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3" id="buttonCol">   
    <div class="frame"> 
     <div id="buttonWrapper1"> 
      <div id="overlay2"> 
       <img src="img/enter-01.png" id="enterButton" > 
      </div> 
     </div> 
    </div> 
</div> 

這是可能的，如果這樣我怎麼能做到這一點？

Answer 1

您可以使用不同的id創建兩次div，如下所示，並使用 display：none;隱藏您不想在媒體查詢中顯示的div。

@media only screen and (min-width : 480px) 
    #buttoncol320{ 
    display:none; 
    } 
    @media only screen and (min-width : 320px) 
    #buttoncol480{ 
    display:none; 
    } 

    <div class="col-xs-12" id="buttonCol320"> 
    </div> 

     <div class="col-sx-6" id="buttonCol480"> 
    </div> 

希望這給你想要的！

Answer 2

這是可能的，但有點超出使用引導網格佈局的目的。你只需要覆蓋CSS規則。從引導樣式表中複製規則並將其粘貼到您自己的樣式表中正確的媒體查詢中，進行所需的調整。

注意：如果您的目標是在媒體查詢中使用不同的斷點，我會建議您不要使用引導程序的網格，而是自己創建網格。您可以只導入適合您需求的框架的必要功能。