在哪里编辑引导程序@grid-float-breakpoint

Question

我知道您可以更改“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

我的问题是，您能否在不自定义新引导程序包的情况下更改@grid-float-breakpoint，而是使用@media 或其他方法通过CSS 更改它。如果可能，请建议在哪里以及如何执行此操作的方法。谢谢

Answer 1

有 2 种推荐的主要方法和 不同 方法来更改 @grid-float-breakpoint（这是 LESS 中的一个变量）。

1. 您可以下载主文件 (https://github.com/twbs/bootstrap/archive/master.zip)，打开 bootstrap.com/variables.less 文件，然后使用 LESS 编译器编译该文件。 这涉及在您的计算机上安装 LESS 编译器，例如 Grunt（多平台）或 CodeKit (Mac)。

1. 或 转到getbootstrap.com/customize 并更改那里的变量并下载已编译的 CSS 文件。

Answer 2

如果您使用的是 SASS 版本，您会在 bootstrap/_variables.scss 的第 286 行及以后找到该变量。

您越深入该文件，就会看到越多的数学和选项。

我发布这个是因为人们可能会来这里寻找 SASS 的答案。

重新编译你的文件确实更好，但如果你要对规则进行例外处理，最好创建一个新的 ID 或 CLASS 来引用你正在做的任何事情。

Answer 3

这里是一个 css-only 解决方案的链接，用于更改 grid-float-breakpoint： 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;
    }
}

只需将 md 尺寸更改为 991 像素 x 1199 像素

由于对我的帖子发表评论，我已将 css 解决方案复制粘贴到我上面的链接后面。 我已经超越了我的应用程序（MVC6 RC）中的解决方案来设置另一个浮点断点（仅通过应用 .css 样式）。
注意：im MVC6，你必须在媒体之前添加另一个@（@@media）。