【问题标题】:How Do I build Bootstrap 4 with a Desktop First approach in mind如何在构建 Bootstrap 4 时考虑到桌面优先方法
【发布时间】:2018-03-15 20:55:56
【问题描述】:

简单问题:Bootstrap 现在是“移动优先”。我如何将其改回“桌面优先”,我的意思是使用“屏幕低于”方法而不是“屏幕高于”。他们确实在他们自己的文档中使用 media-breakpoint-down mixin 给出了一些提示,但我无法让它工作。

任何帮助将不胜感激。

稍后编辑:我的问题是如何修改原始文件,以便在我使用 cmd 中的 npm build 命令构建 bootstrap dist 文件时获得此结果。就这样。我在独立于引导程序的 .css 文件中编写自己的 css

后来的Edit2:如果我不清楚我想要什么,当你构建引导程序时,默认它在构建媒体查询时使用@media-breakpoint-up系统以及它如何构建编译的css(没有媒体查询对于移动设备,min-width:576px 等向上)。我如何让它使用@media-breakpoint-down 反向编译它,所以它没有超过 1200px 的媒体查询,然后 lg 最大 1199,依此类推,然后继续往下走。

【问题讨论】:

标签: css twitter-bootstrap sass


【解决方案1】:

你可以使用:

@include media-breakpoint-down(xs) { 
   //your code
 }

这将转化为:

@media (max-width: 576px) {
   //your code
}

特定屏幕的选项是xs, sm, md, lg, xl

【讨论】:

  • 这是否适用于列的结构方式,例如,如果我有 col-md-3,它将仅适用于特定分辨率和更低而不是特定分辨率和更高?
  • 不,这不会改变它,但你可以先用它来创建你的桌面样式。 Bootstrap 类将保持不变,如果不深入到 bootstrap 的核心就无法更改它,我认为没有必要。
猜你喜欢
  • 1970-01-01
  • 2014-05-23
  • 1970-01-01
  • 2021-11-13
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-11-25
  • 1970-01-01
相关资源
最近更新 更多