`
sunwenpeng
  • 浏览: 10303 次
社区版块
存档分类
最新评论

rails中的CSS 冲突

阅读更多
  前一段时间,做手机客户端party-bid和服务器端rails链接和数据同步的时候,把pa下rty-bid放到rails框架下,在rails开的服务器端口运行,出现了一个问题:在进入竞价结果页面的时候,本来写好的弹出窗口并没有弹出,在console.log出相应的ng-switch变量的时候也可以看到结果是期望的true值,可还是本应弹出的模态框还是没有显示出来。而在原来的单独的party-bid运行的时候不会有问题。
  起初我怀疑,是因为我修改了party-bid的代码,移过来后出现了问题,于是我对比了github中原来party-bid的代码和rails中的party-bid的代码,在修改后还是会出现问题。我索性把github中party-bid的代码拉下来放入了rails中public的另一个文件夹,结果还是不能弹出模态框。
  纠结了一阵后,我注意到party-bid中模态框使用的css文件的引用。由于我在party-bid中加入了客户端的登录页面,在这个登录页面中,我引用了一个表单格式,所引用的css是bootstrap3中的css,而party-bid中同样也使用了bootstrap而它所使用的bootstrap是老的版本,这样工程中就同时有老版本和新版本的bootstrap文件。最坑爹的是,我删除了老版本后,模态框还是显不出来,也就是说模态框的css是在老版本中,而新版本中没有相应的css。(新版本居然没有模态框!!!)
  我只能通过在bootstrap文件中查找相应的模态框css代码复制粘帖到新版本的bootstrap文件,然后再删除老版本的bootstrap文件来解决。这样操作后,登录表单和模态框都能正常显示了。
  rails中app下stylesheets文件包含的css文件,在程序中会自动引用,不用像js(angular-js)那样需要引用相应的文件,刚开始做的时候觉得rails简化了很多东西,这样很方便,现在出现了这个问题意识到,这也是有利有弊的。如果两个css文件出现相同命名的样式,就会出现引用冲突。
分享到:
评论

相关推荐

    rails4.0.0

    Rails 4中的Asset Pipeline进行了优化,提升了静态资源如CSS、JavaScript的处理速度。这个功能允许开发者合并、压缩和版本化静态资源,以减少HTTP请求并提高页面加载速度。 6. **Strong Parameters** 为了解决...

    rails 常见灵异错误汇总

    在Ruby on Rails开发过程中,开发者可能会遇到各种各样的“灵异”错误,这些错误往往令人困惑,有时甚至让人感到无从下手。Rails框架虽然强大且灵活,但其复杂性也意味着可能出现各种意料之外的问题。以下是一些常见...

    关于css排版的几点心得

    在CSS(层叠样式表)布局中,排版是网页设计的核心部分,它决定了元素如何在页面上组织和对齐。以下是我从个人学习中总结的一些关键知识点,这些经验对于初学者来说尤其宝贵。 1. **盒模型**:理解CSS盒模型是排版...

    css经常使用的技巧

    以下是一些从“css使用技巧.txt”中提炼出的关键知识点,这些技巧对于初学者和经验丰富的开发者都非常实用。 1. **选择器优先级**:理解ID选择器(#)、类选择器(.)、元素选择器(tag名)和属性选择器的优先级至...

    less-rails-bootstrap-datepicker:将日期选择器与Rails资产管道集成在一起,并包括LESS源文件

    更少的Rails Bootstrap Datepicker less-rails-bootstrap-datepicker项目使的源LESS文件,已编译CSS和JavaScript文件在Rails资产管道中可用。 好处: 为资产命名空间以避免资产冲突。 顶层要求获取所有样式表或...

    rails-intermediate:此仓库将重点介绍我对Rails的中级实验

    13. **Assets Pipeline**:Rails的资产管道处理JavaScript、CSS和图像等静态资源,支持压缩、合并和版本控制,提高应用性能。 通过这个"rails-intermediate"项目,你可以深入学习这些概念,并通过实践提升你的Rails...

    less-rails-bootstrap:最流行的前端框架,用于在Web上为Rails资产管道开发响应式,移动优先项目

    less-rails-bootstrap项目连接到和,从而使Bootstrap的源LESS文件,编译CSS和JavaScript文件在Rails 3.x和4.x资产管道中可用。 好处: 资产在twitter / bootstrap中进行命名空间以避免资产冲突。 顶层要求获取...

    less-rails-jasny-bootstrap:Jazny Bootstrap较少的源文件

    less-rails-jasny-bootstrap项目使的源LESS文件,已编译CSS和JavaScript文件可在Rails 3.x和4.x资产管道中使用。 好处: 资产在yasny / bootstrap中进行命名空间以避免资产冲突。 顶层要求获取所有样式表或...

    leaflet-defaulticon-compatibility:从CSS检索所有Leaflet Default Icon选项,尤其是所有图标图像URL的选项,以提高与在CSS中修改URL的捆绑器和框架的兼容性

    注意:此处的“兼容性”不是指浏览器的兼容性,而是指使用修改CSS中URL的构建引擎和框架,这通常与Leaflet内置的Default Icon图像自动管理相冲突。 有关更多详细信息,请参见 。 用法 $ npm install leaflet-...

    hackthon_rails

    8. **Asset Pipeline**:学习如何在Rails中组织和预处理CSS、JavaScript及图片等静态资产。 9. **测试**:理解RSpec或Minitest等测试框架,编写单元测试和集成测试以确保代码质量。 10. **版本控制**:掌握Git的...

    Ruby-Xray一个能够显示你的UI骨架的开发工具

    2. 查看CSS样式:每个元素都显示了应用的CSS样式,包括行内样式、类样式和ID样式,这有助于快速调试样式冲突。 3. 验证布局:观察元素的尺寸和位置,确保它们在不同屏幕尺寸下按预期工作。 4. 检查JavaScript事件:...

    initrailsix:为Rails 6自定义初始模板拉伸

    2. **Gemfile.lock**:锁定Gemfile中所有gem的精确版本,确保在不同环境中使用相同版本的库,避免版本冲突。 3. **config/** 目录:这里可能包含了Rails应用的各种配置文件,例如数据库连接(config/database.yml)...

    PersonalSite-OR:Rails 上的个人网站,用于博客和其他内容。

    描述中提到"重新设计了我的旧网站并将其放在导轨上以具有更多功能",这表明开发者将原有的网站进行了重构,并利用 Rails 的强大功能增加了新的特性。Rails 提供了一系列内置的功能,如路由、数据库迁移、测试工具等...

    autoEdit:autoEdit V1 beta rails 版本 - 更多信息见 http

    6. **测试与调试**:理解单元测试、集成测试的重要性,以及如何在Rails和JavaScript环境中进行测试。 7. **部署与服务器**:学习如何将Rails应用部署到生产环境,如Heroku或AWS。 8. **API接口**:如果"autoEdit"与...

    cta_portfolio:具有PostgresQL的基于Rails的网站,利用Webpack渲染ReactJS前端。 设计并计划在自定义网址下实时部署

    - **挑战性**:结合Rails、Webpack和ReactJS可能会遇到技术集成问题,如处理API通信、状态管理、CSS样式冲突等。此外,使用PostgreSQL代替MySQL可能需要适应不同的数据库查询语句和特性。 - **获胜**:成功之处可能...

    Web程序设计计算机科学经典教材.doc

    CSS的层次结构、选择器、属性值、字体、颜色、文本对齐、盒模型、背景图片、冲突解决等核心概念都被详细阐述,使读者能够理解并应用CSS来控制网页的视觉表现。 第四章进入JavaScript的基础知识,JavaScript是一种轻...

    host_app.creation

    同时,CSS模块化系统如CSS Modules或CSS-in-JS也可以帮助管理样式,避免命名冲突,提高代码复用性。 总之,"host_app.creation"是一个关于创建和托管应用的主题,而"CSS"则强调了在设计和布局中的重要性。在"host_...

    EHI-Lab-Denizen-Designer-网站

    Bundler确保在开发和生产环境中使用相同版本的Gem,从而避免版本冲突问题。 3. `$ ./bin/webpack-dev-server`:Webpack是一个模块打包工具,它将JavaScript、CSS和其他资源文件打包成浏览器可理解的格式。Webpack ...

    Aptana 3.4.2 插件2

    4. **框架和库的支持**:Aptana 3.4.2插件2可能加强了对特定Web框架如Rails、Django、Node.js等的集成,让开发者可以更快地构建和测试应用。 5. **版本控制系统**:IDE内置Git、SVN等版本控制工具,插件可能提供了...

    Laravel开发-turbolinks-laravel

    在Laravel框架中,Turbolinks是一个非常有用的库,它源自Ruby on Rails社区,但已经被移植到PHP世界,特别是为Laravel量身定制。Turbolinks的主要目的是提升网页应用的性能,通过减少页面加载时间,提升用户体验。在...

Global site tag (gtag.js) - Google Analytics