Bootstrap v4 - 响应式文本

2024-04-23

如何在 Bootstrap v4 中使用响应式文本? 我试过:

@include media-breakpoint-up(sm) {
  .resp-text {
    font-size: 16px;
  }
}

@include media-breakpoint-up(lg) {
  .resp-text {
    font-size: 28px;
  }
}

但不工作。


可能有多种原因

  • 确保您将 SASS 与 SASS 编译器一起使用,如果没有,则使用普通媒体查询https://v4-alpha.getbootstrap.com/layout/overview/#responsive-breakpoints https://v4-alpha.getbootstrap.com/layout/overview/#responsive-breakpoints
  • 如果您使用的是 SASS,请确保已将正确的 mixins 文件导入到核心 sass 文件中。
  • 如果你认为一切都很完美,那么单独编译 sass 文件并发布错误的屏幕截图,以便我们可以完美地得到它。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Bootstrap v4 - 响应式文本 的相关文章

  • 使用 jQuery 在 Bootstrap 4 中过滤卡片

    我正在尝试使用 bootstrap 4 的新卡片组件创建一个由许多卡片填充的页面 我想创建一个搜索栏 在搜索时过滤掉标题与搜索查询不匹配的卡片 这是我的想法 Plunker 我希望卡片能得到类似的东西display none or opac
  • Bootstrap 4 卡组,其列数基于视口

    我正在尝试在 Bootstrap 4 中实现卡片组功能 以使所有卡片具有相同的高度 Bootstrap 提供的示例显示了 4 张漂亮的卡片 但无论视口如何 这都是 4 张卡片排成一行 查看代码here 这对我来说没有意义 因为我认为您希望卡
  • Bootstrap 4方格

    我想用 Bootstrap 4 创建一个响应式的正方形网格 为此 我正在做这样的事情 一行 div class container div class row div class col div div class col div div
  • 将 bootstrap 列包装在额外的 div 中

    我正在使用 bootstrap v4 当我将列包装在额外的 div 中时 布局会被破坏 这是为什么 链接到代码笔http codepen io mariuszdaniel pen aJJjzJ Works div class contain
  • Bootstrap 4 响应式实用程序可见/隐藏 xs sm lg 不工作

    使用新的响应式实用程序时遇到问题隐藏 可见类 当迁移到引导程序4 我知道 hidden 类已经从 v3 中删除并替换 with hidden up hidden down 使用新的 hidden up hidden down类 但元素没有更
  • Bootstrap 4 阶类似砌体的列卡水平而不是垂直

    可以订购吗Bootstrap 4 卡包裹时从左到右 card columns 从上到下 默认 1 3 5 2 4 6 左到右 1 2 3 4 5 6 由于高度不同 我有必要使用类似砖石的网格 CSS 列的顺序是从上到下 然后从左到右 因此渲
  • Bootstrap 4:如何拥有一个包含容器中内容的全宽导航栏(如 SO 导航栏)?

    我正在使用 Bootstrap 4 如何制作像 SO 导航栏一样的导航栏 内容像 容器 一样对齐 但 Bootstrap 4 中 容器流体 的宽度 我想要 固定顶部 导航栏设置的宽度 而不是固定顶部和 容器 中的导航栏内容 我会提供一个示例
  • Bootstrap v4 中的“p-N”及其变体代表什么?

    我发现 Bootstrap v4 中的命名不太直观 我知道他们希望最大限度地减少所有类使标记混乱的影响 但我无法得出合理的结论 我可以猜测 但我找不到具体的答案 p 1 p 2 p N Flexbox 相关 但是什么是p代表 d flex
  • Angular 4 和 Bootstrap 4 - 合并验证类

    今天我发现我的应用程序中的验证并不总是正确显示 在一个特定的例子中 角度将失败required if
  • Bootstrap 4水平滚动div

    我在 Bootstrap 3 中可以使用此代码 但相同的代码在 Bootstrap 4 中无法使用 基本上 我正在尝试为 DIV 创建水平滚动 这是一个适用于 Bootstrap 3 的工作 JSFIDDLE 我不想要 DEMO https
  • 挂钩从 Typescript 引导 4 模态显示/隐藏事件

    有一个带有 id 的模态myModal我试图在它显示和关闭时连接到事件 按照文档https v4 alpha getbootstrap com components modal events https v4 alpha getbootst
  • Bootstrap 4 - 下拉菜单只能与选项卡菜单一起使用一次

    在 bootstrap 4 中 第一次单击选项卡菜单中的下拉菜单时 它工作正常 但之后就停止工作了 ul class nav nav tabs li class nav item a class nav link active href h
  • `col-xs-*` 在 Bootstrap 4 中不起作用

    我以前没有遇到过这种情况 而且我很难找到解决方案 当引导程序中的列等于medium时 如下所示 h1 class text center Hello world h1 div class container div class row di
  • Bootstrap 4 动画列宽变化

    我有两列这样的 div class container div class row div class col 9 div div class col 3 div div div 我通过 Angular 将类名切换为col 8 offset
  • 使用 bootstrap 4 对 3 列进行排序和堆叠

    I have this structure in bootstrap columns And I want you to change to a lower resolution be ordered as follows 我在这里找到了如
  • Bootstrap 4 - 垂直居中列表项

    我有一个使用 Bootstrap 4 beta 的网页 在此页面中 我有一个内联列表 我希望每个列表项的内容垂直居中 以便项目对齐 如图所示Bootply https www bootply com od2qnkLIkQ 它们目前偏离中心
  • Bootstrap v4 - 响应式文本

    如何在 Bootstrap v4 中使用响应式文本 我试过 include media breakpoint up sm resp text font size 16px include media breakpoint up lg res
  • Bootstrap 4 网格系统中的“col”上没有填充是否正常?

    我是第一次使用 Bootstrap v 4 我有一个footer就是使用新的flex col并且它在桌面上运行得很好 但是当我切换到移动设备时 它们彼此堆叠得如此紧密 没有垂直边距 填充 这是正常行为吗 另外 我希望内容居中或至少有一些偏移
  • 如何在 Bootstrap 4 轮播中堆叠多个图像

    我不知道如何使用 Bootstrap 4 以及如何在一张幻灯片中显示多个小图像 例如缩略图 而不是让图像填充轮播的宽度 我已经使用下面的代码尝试了一些操作 但仍然无法堆叠很多图像 div class container h2 class t
  • 如何在 SASS CSS 中的 Bootstrap 4 中获取 15 列?

    我有一个明确为 1200px 15 cols 框架设计的布局设计 但我的客户只想将 Bootstrap 4 与 SASS 一起使用 是否有可能将 Bootstrap 转换为 15 列布局 我在网上没有看到这样的例子 我不太喜欢小型项目的 B

随机推荐