引导网格：在大屏幕上删除“col col-xs-12”？

Posted 2023-03-06

【中文标题】引导网格：在大屏幕上删除“col col-xs-12”？

【英文标题】：Bootstrap grid: remove 'col col-xs-12' on the large screen?

【发布时间】：2014-03-13 19:02:59

【问题描述】：

我可以在元素中删除或覆盖col col-xs-12 在大屏幕上不使用 使用 js/jquery 吗？我只需要在较小的屏幕上显示col col-xs-12。

移动/小屏幕，

<div class="col col-xs-12">
      <input type="checkbox" name="delete[]" value="" class=""/>
</div>

在大屏幕上，

<div class="col col-xs-12">
      <input type="checkbox" name="delete[]" value="" class=""/>
</div>

【问题讨论】：

没有 js 就无法删除，但可以使用 display:none; 和 css 媒体查询将其在大屏幕上的可见性定位。

查看响应式实用程序类：getbootstrap.com/css/#responsive-utilities

谢谢大家。如何使用媒体查询来删除这些类？

你是说你不想让输入出现在大屏幕上？？

【参考方案1】：

#1：您不希望输入出现在大型设备上：

<div class="col col-xs-12 hidden-lg">
    <input type="checkbox" name="delete[]" value="" class=""/>
</div>

#2：您希望在大型设备上使用另一个宽度：

<div class="col col-xs-12 col-lg-6"> <!-- change col-lg-6 as you want -->
    <input type="checkbox" name="delete[]" value="" class=""/>
</div>

#3：您希望：100% 支持大型设备（需要媒体查询）

<div class="col col-xs-12 autosize-lg">
    <input type="checkbox" name="delete[]" value="" class=""/>
</div>

@media (min-width: 1200px)  
    .autosize-lg 
        width: 100%;