根据Bootstrap中的设备隐藏和移动div

Question

我正在使用Bootstrap创建一个显示桌面,平板电脑和移动设备的布局.我想要实现的目的在这里说明:

为此,我创建了三个div:

<div class="row">
  <div class="col-md-3">Text</div>
  <div class="col-md-3">Text</div>
  <div class="col-md-3">Text</div>
</div>

中间div将隐藏在平板电脑视图中,然后最后一个div将低于移动视图中的第一个div.

使用我目前拥有的,所有三个div在桌面上正确显示,但在平板电脑和移动设备中,所有三个div垂直崩溃.

使用Bootstrap有一种简单的方法吗,或者我必须编写自己的CSS媒体查询吗？

Answer 1

要隐藏中间div,请使用bootstrap中描述的实用程序类:

Bootstrap 3

Bootstrap doc

使用visible-lg该类隐藏平板电脑和手机上的div.

我建议使用col-sm和col-xs根据宽度折叠或不折叠div(了解有关网格系统的更多信息):

<div class="row">
  <div class="col-sm-3 col-xs-9">Text</div>
  <div class="col-sm-3 visible-lg">Text</div>
  <div class="col-sm-3 col-xs-9">Text</div>
</div>

看到这个小提琴

Bootstrap 2.3

Bootstrap doc

使用visible-desktop该类隐藏平板电脑和手机上的div.