Html 在哪里编辑引导程序@grid-float-breakpoint
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27092929/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Where to edit bootstrap @grid-float-breakpoint
提问by Harunojikan
I know that you can change @grid-float-breakpoint in the "variables.less" file which compiles into the bootstrap package we all download and use (I think).
我知道您可以在“variables.less”文件中更改@grid-float-breakpoint，该文件编译为我们都下载和使用的引导程序包（我认为）。
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
└── glyphicons-halflings-regular.woff
My question is can you change the @grid-float-breakpoint without customising a new bootstrap package, but instead change it through CSS with @media or some other method. If possible please advice the method of where and how to do this. Thanks
我的问题是，您能否在不自定义新引导程序包的情况下更改 @grid-float-breakpoint，而是使用 @media 或其他方法通过 CSS 更改它。如果可能，请建议在何处以及如何执行此操作的方法。谢谢
采纳答案by Christina
There are 2 recommended main and differentways to change the @grid-float-breakpoint (this is a variable in LESS).
有 2 种推荐的主要和不同的方法来更改 @grid-float-breakpoint（这是 LESS 中的一个变量）。
- You can download the master (https://github.com/twbs/bootstrap/archive/master.zip), open the bootstrap.com/variables.less file and then compilethat with a LESS compiler. This involves installing a LESS compiler on your computer, such as Grunt (multi-platform) or CodeKit (Mac).
- 您也可以下载大师（https://github.com/twbs/bootstrap/archive/master.zip），打开bootstrap.com/variables.less文件，然后编译是一个不太编译器。这涉及在您的计算机上安装 LESS 编译器，例如 Grunt（多平台）或 CodeKit（Mac）。
- ORGo to getbootstrap.com/customizeand change the variable there and download a compiled CSS file.
- 或转到getbootstrap.com/customize并更改那里的变量并下载已编译的 CSS 文件。
回答by FredyWenger
Here is a link to a css-onlysolution to change the grid-float-breakpoint: CSS-Solution
这是更改 grid-float-breakpoint的仅 css解决方案的链接： CSS-Solution
@media (max-width: 991px) {
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.navbar-text {
float: none;
margin: 15px 0;
}
/* since 3.1.0 */
.navbar-collapse.collapse.in {
display: block!important;
}
.collapsing {
overflow: hidden!important;
}
}
Just change 991px by 1199px for md sizes
只需将 md 尺寸的 991px 更改为 1199px
Of cause the comment to my posting, I have copy-pasted the css-solution behind my link above.
I have overtaken the solution in my app (MVC6 RC) to set another float-breakpoint (only by apply the .css-style).
Note: im MVC6, you have to add another @ before media (@@media).
由于对我的帖子的评论，我已将 css-solution 复制粘贴到我上面的链接后面。我已经超越了我的应用程序（MVC6 RC）中的解决方案来设置另一个浮点断点（仅通过应用 .css 样式）。
注意：在 MVC6 中，您必须在媒体之前添加另一个@（@@media）。
回答by DanSully
If you are using the SASS version, you'll find that variable in bootstrap/_variables.scss around line 286 and onward.
如果您使用的是 SASS 版本，您会在 bootstrap/_variables.scss 中第 286 行及以后找到该变量。
The further you go down that file, the more math and options you'll see.
你越往下看那个文件，你会看到越多的数学和选项。
I post that because people might come here looking for the SASS answer.
我发布这个是因为人们可能会来这里寻找 SASS 的答案。
It really is better to recompile your file, but if you are making exceptions to rules, it might be better to make a new ID or CLASS to refer to whatever you are doing.
重新编译您的文件确实更好，但是如果您对规则进行了例外处理，那么最好创建一个新的 ID 或 CLASS 来引用您正在做的任何事情。
