问题标签 [neat]
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.
html - 将列定位在行的底部
嘿伙计们,我正在使用波旁威士忌。我在这里进退两难,因为我必须将徽标放在页面底部,或者可能高于底部 20%。我有这个跨越全宽容器的 3.5 列的蓝色行。现在在该行内,我插入了一个徽标列,并让它覆盖了所有嵌套的 12 列。 如何获取嵌套在外行底部的 12 列的徽标列。
将徽标行位置设置为绝对或固定会从容器中断开该行并散布整个屏幕。
这是我的 html 代码
继承人是生成的CSS
css - 如何在 Neat 中更改跨媒体查询的自动列数
Bourbon Neat 允许您将span-column()
mixin 与 mixin 一起使用omega()
来创建automatic columns
类似于基础 5 的块网格。但是,在跨媒体查询共享样式时,这些似乎都失败了。看看下面的例子:
它使用第 n 个子位置从行中的最后一项中删除边距,但是当媒体查询发生时,如果您正在更改 omega,它不会覆盖其他 CSS。所以第一个媒体查询将按预期工作。然后,当$ipad
触发查询时nth-child(3n)
,CSS 中的剩余部分会中断$ipad
查询。有没有办法解决这个问题?
编译的CSS:
wordpress - 跨列在 IE9 中不起作用
我在自定义 Wordpress 主题项目中使用 Bourbon Neat 和 Bitters。编写完布局后,我被困在 IE 中让它看起来正确
SCSS概述:
以及从 Wordpress 输出的标记:
html - Thumbnails not displaying correctly
I am new to Neat. i am trying to create a thumbnail grid gallery. Now I have set the grid with no margin and no padding in li but somehow the gap is there between the first row and second row. its the gap between li and the image in it at the bottom. ive marked the li to red to show the gap. can you tell me where am i doing wrong with css. thanks.
here is the css
And here is the Html
i've also uploaded a demo so you can have a look over here. thanks.Demo
macos - 为 Mac 的 Hammer 添加 Neat、Bitters 和 Refill
我最近为 Mac 购买了 Hammer。
我正在制作一个静态网站,并希望使用 Bourbon + Neat、Bitters 和 Refills 来设置页面样式。
如果我是正确的,波旁威士忌已经包含在 Hammer 中,但 Neat、Bitters 和 Refills 不是?在 Hammer for Mac 主页上,关于安装 Neat 的内容如下:
“如果您在 Hammer 中使用出色的 Bourbon Neat 框架,您需要从 Neat GitHub 存储库下载 Neat 代码。Neat 的 SCSS 文件位于 app/assets/stylesheets 目录中。要在您的项目,只需将 app/assets/stylesheets 的内容复制到项目中的文件夹中。然后只需在 SCSS 或 Sass 文件中使用 @import "neat"; 即可使用 Neat。"....
我做到了。我认为它与包含苦味剂和补充品一样需要做。
然后我尝试使用@import“整洁”;我的 main.scss 中的命令,但构建总是失败。
关于如何让它发挥作用的任何想法?
谢谢!
sass - Bourbon Neat:如何扩展列以匹配外部容器?
我正在测试 Bourbon Neat,我在一个外部容器中有两列,我希望这些列的高度相同(与最高的列一样高)。在短列上使用 @include fill-parent 不起作用,它只会使其与外部容器一样宽。我可以用 javascript 来做,但 Neat 不处理这个吗?
这是我的html:
这是我的 SASS:`
谢谢阅读。
编辑:现在,我只是使用 jQuery 来手动均衡列大小,但如果有更整洁的方式(哈哈)来解决这个问题,请告诉我。
bourbon - 为什么没有在新断点上覆盖 omega(value)?
这是 Sassmeister 上的代码,如果链接有任何问题,请告诉我:http: //sassmeister.com/gist/0b7c3a1897fe3bbe33db
我有一个 $tablet 和 $bigscreen 断点,它们使用最小宽度值。
有一个带有 omega(2n) 值的 $tablet 屏幕的媒体查询。然后我有另一个带有 omega(4n) 值的 $bigscreen 断点。我的目标是在 $bigscreen 上每行显示三张图片,在 $tablet 上显示两张图片,在较小的屏幕上显示一张。
如果您检查代码,您可以看到 2n 个 tablet 的值仍然存在于 $bigscreen 上,导致所有块不适合并撞到下一行。这不应该被新的断点覆盖吗?
对 Neat 来说相对较新,如果您有任何建议或有用的提示,将不胜感激!谢谢!
html - HTML 行距
这是我长期以来遇到的一个问题,虽然这似乎是一件小事,但我的 ocd 永远不会放过它。
基本问题与 HTML 代码本身有关。是否有可能让一行代码进入一个新行但仍然像在一行上一样读入它。
例如
进入
frameworks - 使用带有苦味和整洁的波旁威士忌
我想在我的下一个项目中使用带有 Neat 和 Bitters 的波旁威士忌。我已经安装了所有三个,但我不知道如何继续。
我是在我的项目文件夹中分别使用这三个文件夹,还是需要将不同的导入添加到 _bourbon.scss 以便我将所有导入都放在一个主文件中?
例如,Bourbon(在插件中)和Bitters(在扩展中)文件夹中有button.scss、clearfix.scss和hide-text.scss,它们一起使用不会冲突吗?
感谢所有帮助:)
sass - Bourbon Neat Grid,在移动断点处
我有一个非常基本的网站,它使用 sass 和 bourbon 整洁的网格框架。我试图达到与(http://neat.bourbon.io/examples/)网站相同的效果。在 800 像素宽度处,网格似乎有一个断点并删除跨度列并转到 100% 宽度。
下面的代码输出一个包装器和两个 4 和 8 跨度 div。当我将浏览器缩小到 300 像素时,网格仍然保留,并且标题和内容 div 不会中断并全宽 100%。
我怎样才能达到这个效果?我已经尝试将 div 默认设置为 100%,并在断点处添加跨度列,但这不起作用。谢谢。