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

Posted 2023-03-06

【中文标题】使用 Bootstrap 如何在两个不同的媒体查询上使用两个不同的 col-sm-* 类？

【英文标题】：With Bootrap how can use two different col-sm-* classes on two different Media Queries?

【发布时间】：2016-01-19 08:12:21

【问题描述】：

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

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

这可能吗？如果可以，我该怎么做？

【参考方案1】：

您可以使用不同的 id 创建两次 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>

希望这能给你想要的！

【讨论】：

有趣。这似乎很hacky，但可以工作。我试试看

很高兴为您提供帮助！

【参考方案2】：

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

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

【讨论】：

好的，听起来我需要自己滚动网格。