在哪里编辑bootstrap @ grid-float-breakpoint

Question

我知道你可以在"variables.less"文件中更改@ grid-float-breakpoint,它编译成我们都下载和使用的bootstrap包(我认为).

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

有两种推荐的主要和不同的方法来改变@ grid-float-breakpoint(这是LESS中的一个变量).

1. 您也可以下载大师(https://github.com/twbs/bootstrap/archive/master.zip),打开bootstrap.com/variables.less文件,然后编译是一个不太编译器.这涉及在您的计算机上安装LESS编译器,例如Grunt(多平台)或CodeKit(Mac).

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

Answer 2

这是一个仅用于css的解决方案的链接,用于更改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尺寸,只需将991px更改为1199px即可

因为我对帖子的评论,我已经复制粘贴了上面链接后面的css解决方案.我已经超越了我的应用程序(MVC6 RC)中的解决方案来设置另一个浮点数(仅通过应用.css样式).
注意:即时MVC6,您必须在媒体(@@ media)之前添加另一个@.