Tag: css

可以将参数传递给CSS类吗？: 我有这样的div：其中`small-top-margin’如下： .small-top-margin { margin-top: 2em; } 有没有办法将参数传递给css类，以便 class=”top-margin(2) ＃=> margin-top: 2em; class=”top-margin(5) ＃=> margin-top: 5em;等等.. 甚至更好 class=”margin(top, 2) ＃=> margin-top: 2em; 我已经包含了Rails标签，以防有一种方法可以通过rails实现这一点，尽管纯粹的css / sass解决方案会更好。

Bootstrap Sass with Rails 4: 我正在尝试在我的rails（4.0.0）项目中使用bootstrap-sass（3.1.0.2）和sass-rails（4.0.1）。我的application.css.scss文件如下所示： /* * This is a manifest file that’ll be compiled into application.css, which will include all the files * listed below. * * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets, * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path. * * You’re free to […]

根据屏幕大小更改列数: 我正在尝试使用Bootstrap，我想知道如何根据屏幕大小调整列数。我从Bootstrap CSS教程中看到了这个： .col-xs-12 .col-md-8 .col-xs-6 .col-md-4 .col-xs-6 .col-md-4 .col-xs-6 .col-md-4 .col-xs-6 .col-md-4 .col-xs-6 .col-xs-6 我在大屏幕尺寸上有6列，我想在中型屏幕上将其切换为两行3列，在小屏幕上切换为3行2列。在我看来，我只能改变列的宽度而不是列的数量。我可以用Bootstrap来做，如果没有，这将是一个好方法吗？ JavaScript的？

Rails图像和资产未正确加载: 例如，在我的Rails应用程序中，我有类似的东西： .wax_seal { background: url(“wax-seal-small.png”); display: block; height: 100px; margin: 0 auto; width: 92px; } .wax_seal:active { background: url(‘wax-seal-small-broken.png’); } 在我的config/environments/production.rb文件中： # Disable Rails’s static asset server (Apache or nginx will already do this). config.serve_static_assets = true 我手动调用资产的编译： bundle exec rake assets:precompile 并且在名称末尾使用哈希创建文件： wax-seal-small-Uuhqwduhqwdoi234983jewf.png 所以这不起作用： background: url(“wax-seal-small.png”); 但这很好（当我在Chrome中手动输入时）： background: url(“wax-seal-small-Uuhqwduhqwdoi234983jewf.png”); 我在这里错过了什么一步？如何让我的CSS规则添加到那个小哈希？在config/environments/production.rb添加config.assets.compile = true可以使它工作，但我在Rails指南中读到，由于显着的性能命中，这是一个不好的做法。

如何从辅助方法设置变量以包含在SASS SCSS样式表中？: 我有一个帮助方法，它检索我需要进入SASS scss样式表的字符串。如果我在视图中调用该方法它工作正常，但似乎sass想要一个变量。似乎如果我尝试在控制器中设置var，认为这最初是正确的方法，我无法在任何地方看到var。我最初认为你可以简单地从SASS调用一个辅助方法，但显然情况并非如此？如果不，您能否提供一个在sass scss样式表中正确获取变量集的示例，该样式表最初来自辅助方法？

将@ font-face文件集成到rails资产管道中: 我正在尝试将设计人员的html和css文件集成到rails应用程序中。他有大约四个@ font-face文件，这些文件当前链接到application.css文件中。我已将字体存储在assets / fonts文件夹中，并将该文件夹添加到资产管道中（在config / application.rb中）我只使用了Google字体，我在application.html.erb文件中包含了google的链接。我该如何包含这些字体文件？他们应该（1）保留在application.css文件中，还是（2）在app.html.erb文件中链接到javascript和styesheets？例如，像这样：

Font-Awesome ExtJS ActionColumn: 我在我的应用程序中使用FontAwesome和ExtJS。当我这样做时，所有其他按钮工作正常，字体很棒： iconCls: ‘fa fa-edit’ 但是当在actioncolumn中使用相同的配置（允许您将按钮放在网格上的组件）时，图标就不会出现。有谁知道为什么？编辑在尝试了@qdev之后回答：我只是看到了一个？＃f040; 呈现的文字（蓝色）。为操作列按钮生成的HTML： xf040; CSS（取自萤火虫检查员）： element.style { font-family: FontAwesome; } *, *:before, *:after { box-sizing: border-box; } *, *:before, *:after { box-sizing: border-box; } .x-action-col-icon { cursor: pointer; height: 16px; width: 16px; } .x-border-box, .x-border-box * { box-sizing: border-box; } .x-action-col-glyph { color: #9bc8e9; font-size: 16px; line-height: […]

数据表分页按钮 – 删除不需要的空间: 目前我的分页看起来像这样：我正在尝试找出如何删除按钮之间的空间，但一直没有成功。在css文件中，我可以找到的唯一引用分页是： jquery.dataTables.css（319 – 394）： } .dataTables_wrapper .dataTables_paginate { float: right; text-align: right; padding-top: 0.25em; } .dataTables_wrapper .dataTables_paginate .paginate_button { box-sizing: border-box; display: inline-block; min-width: 1.5em; padding: 0.5em 1em; margin-left: 2px; text-align: center; text-decoration: none !important; cursor: pointer; *cursor: hand; color: #333333 !important; border: 1px solid transparent; } .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover […]

Rails资产没有预编译，css在生产中看起来不同: 在开发模式下我的rails应用程序工作和看起来完全符合我的要求，但在生产中它在chrome和safari上看起来不同，在safari中徽标图像加载但不是字体，在chrome中加载字体而不是图像加上输入字段有点长，并且在chrome中不对齐，但在开发模式下，它们在chrome中看起来都很棒我一直搞乱了这一点，并删除了公共/资产几次 rake assets:precompile RAILS_ENV=production 没有成功，预编译没有错误配置/ application.rb中： # Settings in config/environments/* take precedence over those specified here. # Application configuration should go into files in config/initializers # — all .rb files in that directory are automatically loaded. config.assets.paths << "#{Rails.root}/assets/fonts" config.assets.paths << "#{Rails.root}/assets/images" config.assets.paths << Rails.root.join("app", "assets", "fonts") config.assets.precompile += %w( .svg .eot .woff […]