Question

在我的应用程序中，我有两种不同的小尺寸媒体查询

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

但是我希望320px宽度使用col-xs-12并将大小480px与col-sx-6类一起使用？

这是我的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，如下所示，并隐藏您不想在媒体查询中显示的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规则。从引导样式表中复制规则，并将它们粘贴到您自己的样式表中，在正确的媒体查询中进行所需的调整。

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

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

2 个答案: