Tag: twitter bootstrap

资产管道在我的Rails 4.2应用程序中的’application.scss’中不起作用

我是Rails的新手并且如果这是一个愚蠢的问题而道歉。 但我无法解决我的问题：我添加了Bootstrap到我的新应用程序，但它仍然没有使用任何新的样式。 我已将application.css重命名为application.scss并创建了这样的结构： |-stylesheets |-elements |–articles |—article.scss |-application.scss Application.scss /* User styles * Plugins first */ @import “bootstrap-sprockets”; @import “bootstrap”; @import “elements/**/*”; /* * 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, […]

在Wails应用程序中实现WrapBootstrap主题

我刚买了一个wrapbootstrap主题，我试图将它插入我的rails应用程序。 一些像填充，导航栏，glyphicons和大多数javascripts的CSS都无法正常运行。 我将所有样式表和javascripts分别复制到assets / stylesheets和assets / javascripts中。 知道如何解决这些问题吗？

有没有其他人遇到问题造型Twitter Typeahead的搜索栏？

我正在为Twitter Typeahead的搜索栏设计难度。 添加Typeahead javascript似乎在我的搜索栏中添加了三个新类， .twitter-typeahead .tt-hint ， .tt-hint和.tt-input ，每个类都以不同的奇怪方式运行。 首先，在我添加Typeahead之后，搜索栏的背景设置为透明，即使我已将其设置为具有不同类的白色，因此我必须添加一个白色背景包装器，其中包含所有三个新类。 给.typeahead width: 100%; height:100%; border-radius: 20px; width: 100%; height:100%; border-radius: 20px; 它适合包装纸的边框半径和高度，但它比包装纸短约50px。 .tt-input完美地适合高度和宽度，但显然是使背景透明，因为.tt-input和.twitter-typeahead之间约50px的差异是背景的颜色，而不是白色包装。 最后， .tt-hint只服从颜色。 它是白色的，但是当我尝试设置边框半径，高度或宽度时它没有响应。 如果明确设置这些类的属性似乎不适合它们的样式，我必须得出结论，还有其他正在播放的类我找不到。 那，或者Typeahead的代码中有一个错误。 有没有人碰到这样的事情？ 有谁知道为什么这三个类可能没有响应css？ 我的智慧结束了。

为什么Bootstrap CSS没有覆盖其他具有相同代码的项目？

我有这样的问题。 我正在使用项目，但是当我从服务器复制相同的文件时它看起来不同 – 一些Bootstrap样式没有被覆盖。 以下是工作站点标题的屏幕截图： 以及我在计算机上打开相同项目时看到的内容： 我查看了Firebug，我看到，该活动链接使用此默认的Bootstrap样式： .navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus { color: #555555; text-decoration: none; background-color: #e6e6e6; -webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125); -moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125); box-shadow: inset 0 3px 8px […]

Rails 4 – Imagemagickresize以填充空间

我有缩略图产品图像，具有不同的宽高比和大小。 这是一个市场应用程序，因此卖家将加载各种尺寸的图像。 我想resize以使它们适合我所拥有的200×200缩略图网格。 我在Rails 4，Paperclip 4.1，Imagemagick 6.8.9 基于早期版本的IM，这是我想要的效果 – http://www.imagemagick.org/Usage/resize/#space_fill – 填充空白以适应200×200网格。 请在我的演示站点上查看对齐问题 – mktdemo.herokuapp.com 我的型号代码。 我尝试使用一些IM选项，但没有让它按照我想要的方式对齐： has_attached_file :image, :styles => { :medium => “200×200”, :thumb => “100×100” }, :default_url => “” :convert_options => {:medium => ???} 我的html.erb有bootstrap的“缩略图”类。 我不想在css中使用固定像素大小，因为它们没有响应。 我也尝试了一些JS插件，但它们也没有按预期工作。

窗口大小改变时调整标题大小

我目前正在一个网站上工作，我需要放一些图像，一些标题和描述将随之而来。 如果浏览器是全屏，则标题显示在一行上; 但是，如果浏览器宽度减小，标题将自动显示在两行上。 以下是浏览器全屏时的外观： 以下是浏览器宽度减小时的外观： 我想这样做，以便当浏览器宽度减小时标题的大小减少，并想知道我该怎么做。 我无法在Google上找到任何好的资源，或者我可能只是没有使用正确的关键字进行搜索。 我正在使用Ruby on Rails和Bootstrap（2.3.2）开发网站。 我也在使用SASS和jQuery，但我是新手。

如何制作全宽度的超大尺寸？

如果你看看twitter-bootstrap网站，他们的jumbotron会触及他们的nav-header 。 这就是我想要复制的东西。 我将它添加到我的估值索引的顶部，如下所示： Values subjective, put here whatever inspires you. 我也尝试过没有容器，即使bootstrap说， “为了使jumbotron全宽，没有圆角，将它放在所有.container之外，而是在其中添加.container。” 是因为我的application.html.erb被分解为列，所以jumbotron只会扩展到col-md-9的宽度？ 我尝试放入自己的部分，但是在nav-header和jumbotron有我不想要的填充。 就像我说的，我希望它像引导网站一样 。 部分的另一个问题是我需要很多它们因为我想根据页面改变jumbotron的单词。 我们怎么能像bootstap一样呢？ 谢谢你的时间！

Bootstrap 3导航栏链接应显示垂直时应为水平

按照Michael Hartl的ruby on rails教程并在将bootstrap导入custom.css.scss文件后，链接显示为一个块（垂直），当它们真的应该是水平的时，导致导航栏真的很厚，如下所示。 所以问题是我做错了什么以及如何使用boostrap使导航水平？ 这是我的application.html.erb布局 true %> true %> 这是我的Gemfile source ‘https://rubygems.org’ ruby ‘2.0.0’ #ruby-gemset=railstutorial_rails_4_0 gem ‘rails’, ‘4.0.2’ group :development, :test do gem ‘sqlite3’, ‘1.3.8’ gem ‘rspec-rails’, ‘2.13.1’ gem ‘guard-rspec’, ‘2.5.0’ gem ‘spork-rails’, ‘4.0.0’ gem ‘guard-spork’, ‘1.5.0’ gem ‘childprocess’ end group :test do gem ‘selenium-webdriver’, ‘2.35.1’ gem ‘capybara’, ‘2.1.0’ gem ‘growl’, ‘1.0.3’ end gem […]

jQuery.Click方法重新加载页面

我正在尝试创建一个浮动div，它会在触发按钮时显示出来。 这并不难，但是当我按下按钮时，页面会自动重新加载。 我不知道为什么。 我试图使用Bootstrap的Popover，但由于同样的问题它没有按预期工作。 当弹出窗口被触发时，页面重新加载并且弹出窗口明显消失。 我正在使用RoR，只是说如果找出问题会有用。 我在文档的底部有这样的东西： Show $(document).ready(function() { console.log(“Page is loaded.”); // Custom Popover $(“#example”).click(function() { console.log(“Showing”); }); }); 页面加载时会显示第一个console.log内部就绪function。 当我触发“Show”按钮时，该console.log再次显示在浏览器的控制台中。 这没有任何意义。 谢谢！

Rails：Bootstrap下拉菜单不起作用

我是Rails的新手，并且一直在关注Michael Hartl的教程。 一切都进展顺利，直到我进入下拉菜单，这是没有用的，然后工作，现在不工作:(我已经阅读了几个post和修复，我怀疑我的修修补补已经到了非常简单，我已经做了一些事情来阻止它工作。我会说我最初在我的gem文件中有bootstrap-sass 2.x，然后将其更改为3.x，但又回到了2.x.因为我没有意识到由于类名更改而导致3.x会导致问题。所以，也许这个工作的时间是我安装了bootstrap-sass 3.x时，不确定。从我所知道的虽然一切都按照它需要的方式设置。我在Windows 8.1下开发，我不得不修复execjs和特定的runtimes.rb文件的问题。所以，这是我的详细信息： 的Gemfile： source ‘https://rubygems.org’ ruby ‘1.9.3’ # Bundle edge Rails instead: gem ‘rails’, github: ‘rails/rails’ gem ‘rails’, ‘4.0.2’ gem ‘bootstrap-sass’, ‘2.3.2.0’ gem ‘sprockets’, ‘2.11.0’ gem ‘bcrypt-ruby’, ‘3.1.2’ # Use sqlite3 as the database for Active Record gem ‘mysql2’, ‘0.3.15’ # Use SCSS for stylesheets gem ‘sass-rails’, ‘4.0.1’ # Use Uglifier […]