问题标签 [bourbon]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
0 回答
216 浏览

sass - Bourbon Neat 在 sass watch 后给了我错误

大家好,我是波旁整洁的新手。我在一个文件夹中安装了波旁威士忌和整洁。现在在我这样做之后

编译时生成的 css 有以下错误。

如果我做错了什么,请告诉我。谢谢。ps:做的Neat--ver时候说DL is deprecated.

0 投票
1 回答
426 浏览

sass - DL 已弃用,请在安装 Bourbon 和 Neat 时使用小提琴消息

我刚刚安装了 SASS 版本 3.3.5 maple,现在使用命令行我安装了波旁威士忌,使用gem install bourbon它安装 bourbon 3.1.8并且还安装了整洁的,ver 1.6.0 现在我去了我的空白文件夹并运行它

尽管它安装了文件夹,但它在编译时会出现更多错误。请告诉我该怎么办。谢谢。

0 投票
2 回答
344 浏览

html - 改变波旁威士忌中网格的最大宽度属性

我第一次为你使用纯波旁威士忌。我想要做的是在 PX 中设置max-width整洁的属性_grid.css 现在我正在尝试在 PX 中执行此操作,700px但默认情况下$max-width: em(1000) !default; 我尝试在 PX 中提供它但它不起作用。有人可以告诉我我在哪里做错了吗?谢谢。

0 投票
2 回答
160 浏览

css - 为什么我的列表项缩略图会这样显示?

嘿,我已经设置了一些断点,并以百分比设置了列表项,它非常适合不同的断点。

但是我没有设置的默认设置是这样显示的。

在此处输入图像描述 这是我的 sass 代码。

请告诉我我在哪里做错了。谢谢。这是我的演示 演示链接

0 投票
2 回答
142 浏览

css - 网格列未正确显示

我正在使用波旁威士忌。我在网格设置中设置了一些断点,对于移动版本,我设置了 4,如下所示:

我将左右容器设置为 3 为左,1 为右;像这样:

但不知何故,容器相互堆叠,而不是跨越 3 列和 1 列。我究竟做错了什么?

0 投票
1 回答
216 浏览

html - 将列定位在行的底部

嘿伙计们,我正在使用波旁威士忌。我在这里进退两难,因为我必须将徽标放在页面底部,或者可能高于底部 20%。我有这个跨越全宽容器的 3.5 列的蓝色行。现在在该行内,我插入了一个徽标列,并让它覆盖了所有嵌套的 12 列。 如何获取嵌套在外行底部的 12 列的徽标列。

将徽标行位置设置为绝对或固定会从容器中断开该行并散布整个屏幕。

在此处输入图像描述

这是我的 html 代码

继承人是生成的CSS

0 投票
0 回答
290 浏览

javascript - 使用 js/jQuery 防止 bourbon/refill 滑动菜单在特定断点处操作

我正在为一个项目使用波旁威士忌笔芯的滑动菜单,只是希望它一直运行到特定的断点。我认为下面的这种方法会起作用。

CSS:

奇怪的是,这在浏览器向外扩展时起作用。但是,当折叠时,会出现闪烁,并且在到达断点之前菜单会显示一两秒。我应该将导航中js-menusliding-menu-content课程设置为display:none吗?

更新: 我在 js 中添加了一个条件来显式隐藏正在显示的类......但是当它高于 960px 时,这从我的页面中删除了导航。这也是用 js/jQuery 控制视口的正确方法吗?

有人知道吗

JS:

我知道断点和其他控制器(respond.js 等)。这是解决这个问题的正确方法吗?

0 投票
5 回答
6245 浏览

ruby - Sass::SyntaxError:找不到或无法读取要导入的文件:bourbon/bourbon

我已经安装了 rvm 和波旁威士忌。然后我将波旁威士忌安装到我的 /css 目录中。但是,当我尝试

我收到此错误:

我已经检查了具有相同问题的其他线程,但似乎没有一个可以解决我的问题。我怎样才能让这个错误消失并让波旁威士忌正确导入?

0 投票
2 回答
1300 浏览

css - 如何在 Neat 中更改跨媒体查询的自动列数

Bourbon Neat 允许您将span-column()mixin 与 mixin 一起使用omega()来创建automatic columns类似于基础 5 的块网格。但是,在跨媒体查询共享样式时,这些似乎都失败了。看看下面的例子:

它使用第 n 个子位置从行中的最后一项中删除边距,但是当媒体查询发生时,如果您正在更改 omega,它不会覆盖其他 CSS。所以第一个媒体查询将按预期工作。然后,当$ipad触发查询时nth-child(3n),CSS 中的剩余部分会中断$ipad查询。有没有办法解决这个问题?

编译的CSS:

0 投票
0 回答
204 浏览

wordpress - 跨列在 IE9 中不起作用

我在自定义 Wordpress 主题项目中使用 Bourbon Neat 和 Bitters。编写完布局后,我被困在 IE 中让它看起来正确

站点的临时 URL。

使用具有相同标记的静态站点的工作示例。

SCSS概述:

以及从 Wordpress 输出的标记: