使用 Bootstrap 如何在两个不同的媒体查询上使用两个不同的 col-sm-* 类 ？

Question

在我的应用程序中，我有两个不同的小型媒体查询

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

但我希望 320px 宽度使用 col-xs-12 和 480px 大小 col-sx-6 class?

这是我的 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

这是可能的，但有点超出了使用 bootstrap 网格布局的目的。您只需要覆盖 css 规则。从 bootstrap 样式表中复制规则并将它们粘贴到您自己的样式表中的正确媒体查询中进行所需的调整。

注意：如果您的目标是在媒体查询中设置不同的断点，我建议您不要使用 bootstrap 的网格，而是制作您自己的网格。您可以只导入适合您需要的框架的必要功能。

Answer 2

您可以使用不同的 ID 创建 div 两次，如下所示，并隐藏您不想在媒体查询中显示的那个，使用 display:none;

   @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>

希望这给你想要的！