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

【问题标题】：Hide and move divs depending on device in Bootstrap根据 Bootstrap 中的设备隐藏和移动 div
【发布时间】：2014-12-17 10:26:45
【问题描述】：

我正在使用 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 都在桌面上正确显示，但在平板电脑和移动设备上所有三个都垂直折叠。

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

【问题讨论】：

标签： html css twitter-bootstrap-3

【解决方案1】：

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

引导程序 3

Bootstrap doc

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

我建议根据宽度使用 col-sm 和 col-xs 折叠或不折叠 div (Learn more about grid system)：

<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

引导程序 2.3

Bootstrap doc

使用 visible-desktop 类在平板电脑和手机上隐藏 div。

【讨论】：

感谢您为此答案付出的努力，不胜感激。

【解决方案2】：

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

【讨论】：

【解决方案3】：

除了@Getz 的回答，这里还有一些参考资料详细解决了您的问题。

要定位设备，只需写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 */
}

【讨论】：

【解决方案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>

【讨论】：

这可能是 bootstrap 2.3 的解决方案，但使用 v3 中的新网格系统，可以更简单地完成。
@Getz 是的，我看到了你的答案..不是一个引导者......我使用基金会..:)