Question

我试过这段代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>Hello World!</h1>
  <p>Resize the browser window to see the effect.</p>
  <div class="row">
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
    <div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
  </div>
</div>

</body>

我想在手机视图中隐藏div以下。我可以使用媒体查询或其他一些东西。我们可以用bootstrap网格系统来做吗？

<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>

Answer 1

您可以添加任何这些条件类

http://getbootstrap.com/css/#responsive-utilities-classes

Answer 2

试试这个..

<div class="col-xs-4 hidden-xs" style="background-color:lavender;">.col-sm-4</div>

以及根据设备宽度定义的以下类名。

超小型设备 电话（＆lt; 768px）(Class names : .visible-xs-block, hidden-xs)

小型设备 平板电脑（≥768px）(Class names : .visible-sm-block, hidden-sm)

中型设备 桌面（≥992px）(Class names : .visible-md-block, hidden-md)

大型设备 桌面（≥1200px）(Class names : .visible-lg-block, hidden-lg)

有关详细信息：http://getbootstrap.com/css/#responsive-utilities

Answer 3

使用这些类隐藏并显示在相应的设备中

.visible-phone
.visible-tablet
.visible-desktop
.hidden-phone
.hidden-tablet
.hidden-desktop

如何隐藏bootrap网格系统＆＃39;柱

3 个答案: