根据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在桌面上正确显示，但在平板电脑和移动全部三个垂直崩溃。

是否有一种简单的方法可以使用Bootstrap执行此操作，还是必须编写自己的CSS媒体查询？

Answer 1

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

Bootstrap 3

Bootstrap doc

使用visible-lg课程隐藏平板电脑和手机上的div。

我建议根据宽度（Learn more about grid system）使用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>

请参阅此fiddle

---

Bootstrap 2.3

Bootstrap doc

使用visible-desktop课程隐藏平板电脑和手机上的div。

Answer 2

.row {width:100%;position:relative;}
.col-md-3{width:3.33333%;float:left;padding:10px;height:100px;}

Answer 3

除了@Getz之外，这里有一些参考文献详细解决了你的问题。

• Media Queries: How to target desktop, tablet and mobile?
• Media Queries for standard devices

要定位设备，然后只需编写min-device-width。例如：

适用于iPhone

@media only screen and (min-device-width: 480px){
.middle_div { display: none;}
/* other responsive styles*/
}

适用于平板电脑

@media only screen and (min-device-width: 768px){
.middle_div { display: none;}
}

为所有设备锻炼的最佳解决方案

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Answer 4

<div class="row visible-lg">
  <div class="col-md-4">Text</div>
  <div class="col-md-4">Text</div>
  <div class="col-md-4">Text</div>
</div>

<div class="row visible-md">
  <div class="col-md-6">Text</div>
  <div class="col-md-6">Text</div>
 </div>
<div class="row visible-sm">
  <div class="col-md-12">Text</div>      
 </div>
<div class="row visible-sm">
  <div class="col-md-12">Text</div>      
 </div>