根据Bootstrap中的设备隐藏和移动div
约翰·马克·史密斯
我正在使用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媒体查询？
盖茨
要隐藏中间div，请使用引导程序中介绍的实用程序类：
引导程序3
使用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
使用visible-desktop该类可隐藏平板电脑和手机上的div。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
将bootstrap 3中的小型设备的上div和下div移动到ip
- 2
在移动设备上隐藏 DIV
- 3
在移动设备上使用 jquery 隐藏 div
- 4
根据设备宽度显示/隐藏 div
- 5
Jquery在移动设备的某些点滚动时显示和隐藏div
- 6
如何隐藏移动设备中的元素？的CSS
- 7
在移动设备中隐藏某些图像
- 8
根据所选选项隐藏和显示不同列中的 DIV
- 9
在移动设备上隐藏div无法正常工作
- 10
隐藏 <div> 块在移动设备上不起作用
- 11
根据DIV中的文本值隐藏DIV
- 12
根据用户输入显示和隐藏DIV
- 13
根据条件显示和隐藏子div
- 14
Bootstrap4在移动设备的两行和三行中对齐付款按钮
- 15
根据JavaScript中的价格和类别复选框隐藏和显示div
- 16
隐藏jquery datepicker并在移动设备中显示本机
- 17
在移动设备中，隐藏输入并避免提交
- 18
Bootstrap 3 Div订购台式机与移动设备
- 19
Bootstrap 4：修复移动设备上 Div 之外的图像
- 20
如何在 xcode 中根据设备运动移动视图
- 21
bootstrap3移动设备和屏幕的按钮大小不同
- 22
Bootstrap页眉和页脚未显示移动设备上的链接
- 23
Bootstrap 3响应式桌面和移动设备布局
- 24
Safari移动设备和桌面设备隐藏了完整的引荐来源网址：为什么？
- 25
使用javascript根据html中的下拉选择显示和隐藏div元素
- 26
如何在Vue js中根据另一个div中单击的内容显示和隐藏div？
- 27
bootstrap navmenu：仅在小型设备中强制自动隐藏
- 28
如何使用vue.js和bootstrap4在移动视图中隐藏边栏并在移动视图和其他设备视图中切换单击
- 29
Bootstrap交替布局以堆叠在移动设备中
我来说两句