根据屏幕大小的列数？答案

【问题标题】：Number of columns according to screen size?根据屏幕大小的列数？
【发布时间】：2017-12-22 11:06:35
【问题描述】：

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

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

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

感谢您的帮助！谢谢！

【问题讨论】：

标签： css html twitter-bootstrap responsive-design

【解决方案1】：

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

【讨论】：

【解决方案2】：

通过使用 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>

【讨论】：

使用引导程序是什么意思？您可以将类添加到您要隐藏的列中，然后将 css 代码添加到您的 .css 文件或您拥有 html 的同一个路径中。
如果你的 bootstrap 比这个 css 代码强，改变 display:none;显示：无！重要；
随意更改此最大宽度：500px 作为您的 iPhone 或 Ipad 屏幕尺寸。
有没有办法在不使用自定义样式而只使用引导类的情况下实现？
Bootstrap 为小屏幕按不同的顺序排列列，它不会隐藏它们。