程序员经验分享-hwhale

在响应式布局中隐藏元素？

2023-11-25

通过引导程序查看，它们似乎支持折叠较小屏幕的菜单栏项目。页面上的其他项目是否有类似的内容？

例如，我有一个带有导航药丸的浮动右侧。在小屏幕上这会导致问题。我很乐意至少将其放入类似的点击显示更多下拉列表中。

这在现有的 Bootstrap 框架中可能吗？


Bootstrap 中添加了新的可见类

超小型设备手机 ((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

自 v3.2.0 起，以下内容已弃用

超小型设备 手机 ((Class names : .visible-xs, hidden-xs)

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

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

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

更老的 Bootstrap

.hidden-phone, .hidden-tablet等不受支持/已过时。

UPDATE:

Bootstrap 4 中有两种类型的类：

  • The hidden-*-up当视口位于给定断点或更宽时隐藏元素。
  • hidden-*-down当视口位于给定断点或更小时，它会隐藏元素。

另外，新xl为宽度超过 1200 像素的设备添加视口。欲了解更多信息，请点击此处.

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

twitterbootstrap

responsivedesign

在响应式布局中隐藏元素？ 的相关文章

  • 无法在jspdf中加载多个图像

    我正在尝试加载动态生成的多个图像 我想将这些图像转换为 PDF 格式 HTML 代码如下

  • 重新加载更新的 javascript> 代码而不完全重新加载 html 页面

    我正在开发一个单页 Web 应用程序 它具有许多不同的功能和形式 当开发一个深度 我的意思是主页上没有的 功能时 我会经历这个循环 开发代码 编辑类和函数 刷新整个页面 一路点击 直到到达我需要测试的部分 有时加起来大约一分钟 测试新代码

  • html5 canvas 上的错误显示 lineWidth=1

    I have example https developer mozilla org samples canvas tutorial 4 5 canvas linewidth html https developer mozilla org

  • div 中的文本字符有限，添加“阅读更多”链接并在单击链接时显示所有字符

    我有一个 div 里面有文本 使用 PHP 和 MySQL 显示 结构如下 div class description p Here is a lot of text p div 我想在 p 标签内的文本超过 100 个字符时显示 阅读更多

  • 未捕获的 TypeMismatchError：无法在“CanvasRenderingContext2D”上执行“drawImage”

    我对以下代码片段有疑问 var o inserted motive find span contains document documentElement o 0 b fillText m i h b drawImage d i h e f

  • iPad - 无法在框架内滚动

    我无法滚动 iPad Safari 中框架内调用的 pdf 我已经尝试过两件事 2 指滚动 使用对象 嵌入代替框架 但这是行不通的 事实上我已经尝试了很多东西 溢出 高度等等 请帮我 先感谢您 根据这篇文章http support appl

  • CSS3变换：悬停时翻译，带有过渡[重复]

    这个问题在这里已经有答案了 这应该很简单 我的 HTML 中有一堆锚点 如下所示 a href Link 1 a a href Link 2 a a href Link 3 a a href Link 4 a a href Link 5 a

  • 为什么网格项目不居中？

    由于某种原因 两个输入范围使网格中的前两项偏离中心 我假设这是因为它们的影子 DOM 样式 事实真的是这样吗 有谁知道为什么范围使项目 A 和 B 偏离中心 这是一个代码笔 https codepen io tOkyO1 pen QOeKL

  • 如何强制折断不可折断的字符串？

    我有一个根据数据库中包含的数据生成的 HTML 页面 数据库有时包含浏览器无法分解的长字符串 因为这些字符串不包含可分解的字符 空格 点 逗号等 有没有办法使用 html css 甚至 javascript 来解决这个问题 看到这个link

  • 如何覆盖 bootstrap 表 td 样式？

    我正在使用 Bootstrap 3 3我有一个 HTML 代码如下 div table class table table striped tr td 03 td td 04 td td 05 td td 06 td td 07 td td

  • 如何在php中使用一张图像绘制形状

    我需要使用图像的一部分来创建帧图像 例如 用户将从后端上传图像片段 现在我需要根据前端用户的要求在前端创建一个框架 用户将选择框架的高度和宽度 然后他将选择该图像片段 如下所示 我没有办法做到这一点 我尝试通过 css 和 html can

  • 用于渲染 html 子集的 Django templatetag

    我有一些 html 在本例中是通过 TinyMCE 创建的 我想将其添加到页面中 但是 出于安全原因 我不想只打印用户输入的所有内容 有谁知道模板标签 最好是过滤器 只允许呈现 html 的安全子集 我意识到 Markdown 和其他人就是

  • 使用 :hover 作为元素的内联样式（使用 HTML/CSS/php）[重复]

    这个问题在这里已经有答案了 可能的重复 如何将 a hover 规则嵌入到文档中间的样式属性中 https stackoverflow com questions 131653 how do i embed an ahover rule i

  • 引导标签输入宽度

    我正在尝试使用引导程序标签输入 http timschlechter github io bootstrap tagsinput examples 以模态中包含的形式 像这样 div class form group div

  • 使用 CSS 覆盖透明 div 中的不透明文本

    我试图使透明 div 内的文本没有不透明度 也就是全黑 div style background 3cc p style background 000 This text should be all black p div 只用 CSS 就

  • 没有类的 CSS 选择器

    我正在使用选择器来选择不具有一个类的所有元素 list th not foo some rules 我怎样才能将其应用到多个班级 list th not foo list th not bar some rules 上面的 CSS 当然不会

  • 模态中的引导模态

    如何使用 Jquery 在另一个模态中构建引导模态 第一个模态应该在后台 当我参考引导文档时 发现一次显示多个模式需要自定义代码 任何想法 您可能想尝试 Bootstrap Modal 插件 此处演示 可堆叠 http jschr gith

  • 弹出窗口的动态高度取决于内容，可能吗？

    是否有可能获得一个宽度始终为 400px 的弹出窗口 但根据弹出窗口中的内容动态高度 我已经看到了这个 但不知道如何将其应用到弹出窗口 调整 iframe 的宽度高度以适应其中的内容 https stackoverflow com ques

  • 水平对齐输入字段

    我正在尝试获取一个输入字段 并且它与同一水平线上的关联提交按钮相关 但事实证明这是一个挑战 这是我的代码

  • 如何：带有 onclick 的 div 位于另一个带有 onclick 的 div 中

    只是一个简单的问题 我遇到了 div 与 onclick javascript 之间的问题 当我点击内部 div 时 它应该只触发它的 onclick javascript 但外部 div 的 javascript 也会被触发 用户如何点击

随机推荐

热门标签