根据屏幕尺寸的列数？

Posted 2021-05-02

请考虑页面的以下布局。容器内有三列。

<div class = "container">
  <div class="row">
    <div class="col">
    </div>
    <div class="col">
    </div>
    <div class="col">
    </div>
  </div>
</div>

我想解决的问题是，对于移动屏幕尺寸，我想隐藏中间列。对于大于移动设备的屏幕尺寸，例如平板电脑，笔记本电脑和台式机，我想显示中间列。我怎样才能做到这一点。所有三列的宽度应相等。

我感谢任何帮助！谢谢！

答案

Bootstrap包含responsive utility classes隐藏或显示元素是特定断点。可见类是visible-xs-*，visible-sm-*，visible-md-*和visible-lg-*。隐藏的类是hidden-xs，hidden-sm，hidden-md和hidden-lg。

如果你想隐藏一个小元素和超小分辨率的元素，你可以做像<div class="col hidden-xs hidden-sm">这样的事情

Bootply example

另一答案

通过使用css，您可以隐藏任何内容。见下文：

    <div class = "container">
      <div class="row">
        <div class="col">
        </div>
        <div class="col column-to-hide">
        </div>
        <div class="col">
        </div>
      </div>
    </div>


 <style>
    @media screen and (max-width: 500px){ 
        .column-to-hide{
           display:none;
        }
    }
  </style>