Bootstrap导航栏崩溃时最简单的更改方法（使用bootstrap gem） [英] Easiest way to change when Bootstrap navbar collapses (using bootstrap gem)

问题描述

我有一个使用bootstrap-sass gem的Rails应用程序。我想将导航栏折叠的宽度从平板电脑（979px）更改为手机（769px）。覆盖媒体查询不是一个整洁的解决方案。

I've got a rails app using the bootstrap-sass gem. I'd like to change the width the navbar collapses from tablet (979px) to phone (769px). Overriding a media query isn't a tidy solution.

我在variable.less和以下变量中编辑了 @navbarCollapseWidth 构建引导程序，然后将内容bootstrap-sensitive.css复制到gems ... vendor / assets / stylesheets / bootstrap中的response.scss中。但是，现在我失去了在不丢失更改的情况下更新gem的能力。

I've edited @navbarCollapseWidth in variables.less and built bootstrap, then copied the contents bootstrap-responsive.css into responsive.scss in gems...vendor/assets/stylesheets/bootstrap. Now however, I've lost the ability to update the gem without losing my changes.

这里最好的方法是什么？我想做一个我认为是简单的更改，但请保持我的gem可更新。也许在application.css.scss中使用 @import bootstrap-response-mine; 然后在需要时手动更新该文件？

What's the best method here? I'd like to make what I think is a simple change but keep my gem update-able. Perhaps using @import "bootstrap-responsive-mine"; in application.css.scss then manually updating that file when I need to?

推荐答案

您是否已阅读有关配置的一些信息这个宝石？

将 bootstrap导入您选择的SCSS文件中，以获取所有Bootstrap的样式，mixin和变量！

Import "bootstrap" in your SCSS file of choice to get all of Bootstrap's styles, mixins and variables!

@import "bootstrap";

需要配置一个或两个变量吗？在导入Bootstrap之前，只需定义要更改的
变量的值即可。 Sass将
尊重您现有的定义，而不是用
Bootstrap默认值覆盖它。

Need to configure a variable or two? Simply define the value of the variable you want to change before importing Bootstrap. Sass will respect your existing definition rather than overwriting it with the Bootstrap defaults.

$navbarCollapseWidth: 769px;
@import "bootstrap";

还是那不是您所需要的？

Or that is not what you need?

这篇关于Bootstrap导航栏崩溃时最简单的更改方法（使用bootstrap gem）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！