个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
24
4
我查看了 Bourbon Neat 的示例响应式网格。据我所知，我正在正确使用它。
问题
<div>标签都占据了自己的一行，就好像我把它们都做了一样 span-columns(12) 我的猜测是我没有正确嵌套元素或者我应该使用诸如 <section 之类的标签或 <aside>
以下是我目前为了学习这个响应式框架所拥有的...
application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>LawRails</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<%= render "layouts/header" %>
<%= yield %>
</body>
</html>
header.html.erb
<div class="contain-header">
<div class = "last-names">Attorney & Attorney</div>
<div class = "contain-eight">
<div class = "street-address">250 W. Main Street Suite 9999</div>
<div class = "city-state-zip">City, US 30399</div>
</div>
</div>
header.css.scss
.contain-header {
@include outer-container;
.last-names {
@include span-columns(4);
}
.contain-eight {
@include span-columns(8);
.street-address {
@include span-columns(4 of 8);
}
.city-state-zip {
@include span-columns(4 of 8);
}
}
}
application.css.scss
@import "bourbon";
@import "neat";
@import "welcome";
@import "layout";
如前所述。 div 都占据了自己的整行。我想学习如何按照 css 的建议将所有内容分隔成一行。
最佳答案
看起来您的代码应该可以工作。请在此处查看要点:http://sassmeister.com/gist/d8f0c7ffa3ff16e93b8a
我的猜测是您没有正确导入 neat 和/或 bourbon。
在您的 application.css.scss 中确保您 @import "header"
关于html - Bourbon Neat——响应式网格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28198160/
24
4
0
我正在学习与 Bourbon Neat 合作，而且我一直在使用 Bootstrap 的网格系统。我正在尝试重新创建 this Bootstrap grid page学习 Bourbon Neat 的基
我已经安装了 rvm 和 bourbon。然后我将 bourbon 安装到我的/css 目录中。但是当我尝试 @import 'bourbon/bourbon'; 我收到这个错误: Sass::Syn
我用 node-sass、node-bourbon、node-neat 运行 Gulp。到目前为止一切顺利，可以将 sass 文件编译成 css 而不会出错。除非，我在 scss 文件的顶部导入 bo
“@import 'bourbon/bourbon'”是否与根据需要从每个 bourbons 文件夹中导入单独的 mixin 一样有效？例如:如果我只从 bourbon 导入我需要的 css3 mix
我刚开始使用 Yeoman，到目前为止效果很好。 我想用 Bourbon/bourbon neat 替换 compass，但我遇到了问题。我关注了this tutorial但是当我运行“grunt s
@include span-columns(12) 和 @include row() 有什么区别？我应该使用哪个以及何时使用？ 最佳答案 这里有 3 个选项: div.span-12 { @inc
@include span-columns(12) 和 @include row() 有什么区别？我应该使用哪个以及何时使用？ 最佳答案 这里有 3 个选项: div.span-12 { @inc
我尝试使用npm模块来处理scss文件。波旁节。 我得到以下错误： with: function() { var paths = Array.prototype.slice.call(argum
我第一次使用 bourbon neat，它的表现并不完全符合我的预期 - 这可能意味着我设置错误。 我正在开发移动设备优先，所以我希望我的布局在我的桌面断点和我的较大断点之间保持相同(以便样式级联到下
我的 CSS 中有以下内容: body { @include outer-container; color: $Dark-Blue; background-color: $Light
我正在尝试使用 refills bourbon 来使用他们的 CSS 库。据我了解，我所要做的就是复制并粘贴他们的 css 和 html，它应该可以工作。但是当我尝试时，css 没有生效。 我已经将链
我正在尝试制作一个基于 Bourbon Neat 网格的响应式网站。当我将自己计算机上的浏览器大小调整为手机大小时，我的媒体查询工作正常，但是当我在手机上加载网站时，没有任何移动更改出现。 我现在有以
我刚开始使用 Bourbon Neat，对断点的工作原理有疑问。在我的 grid_seeings.scss 中，我设置了如下断点: $xsm: new-breakpoint(min-width 300
我想在单个元素上放置两个框阴影。以下不起作用: @include box-shadow(1px 1px 488px 1px rgba(0, 0, 0, 0.12) inset); @include b
我最近开始使用 Bourbon SASS 插件的更新版本。我以前使用自定义 mixin 来设置 width 和 height 使用以下语法； $width: 350; $height: 200; .w
有没有人想出如何使用 Bourbon Neat 创建一个固定在页面底部的页脚，同时保持它的响应性？ 所有著名的粘性页脚解决方案都与 Neat 不“兼容”。 最佳答案 我在几个使用 Bourbon Ne
我查看了 Bourbon Neat 的示例响应式网格。据我所知，我正在正确使用它。 问题 标签都占据了自己的一行，就好像我把它们都做了一样 span-columns(12) 我的猜测是我没有正确嵌套元
使用 Bourbon 定义 CSS3 动画样式。几个小时以来，我一直在用头撞墙，试图弄清楚发生了什么。我正在尝试为一个绝对位于另一个圆圈之上的曾经的圆圈制作动画。圆圈从以下样式开始: .circle
默认情况下，Neat 使用百分比作为每个 span-columns 的边距。元素，但我希望有一个固定的 30px排水沟，不管 outer-container宽度。 最佳答案 一种解决方案是创建您自己的
我正在使用 ember-cli=>2.9.1,node=>9.6.1,bower=>1.8.2,npm=>5.6.0 我使用以下命令创建了一个示例 ember 应用程序， ember new //创建
我是一名优秀的程序员,十分优秀！