web-dev-qa-db-ja.com

Bootstrap navbar collapseカスタム幅のメディアクエリ

こんにちは、私は@screen-md :992px;で折りたたむためにnavbarを修正したいと思います。 navbar.lessを変更しましたが、まだ機能せず、何をすべきかわかりません。

それでは、カスタムメディアクエリサイズでメニューを折りたたむために@grid-float-breakpoint変数を変更するにはどうすればよいですか？

FIDDLE：

csstwitter-bootstraptwitter-bootstrap-3media-queries
15
BurebistaRuler

このように3.1で折りたたみポイントを変更できます。

@media (max-width: 992px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    }
}

http://www.bootply.com/120951

Bootstrap 4では、ブレークポイントの変更が簡単です。 この回答を参照

34
Zim

variables.less 変化する

@grid-float-breakpoint:   @screen-sm-min

に

@grid-float-breakpoint: @screen-md-min;

またはあなたが望む他の幅に。

この方法で簡単かつ簡単に行えます。

2
barduro

これを解決するために使用したコードを以下に示します。スタイルシートに追加するだけです。

@media (max-width: 1992px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    }
}
2
Jude

Twitter Bootstrapを使用している場合、レスポンシブコラプスは既に組み込まれています。メニューのクラスを使用して呼び出すだけでよい場合があります。しかし、これは私が今使っているものを含めて、私が使ったほとんどのBootstrap=アプリケーションで使用するcssです

@media(min-width:768px) {
   .navbar-collapse {
    width: auto;
    /* more code here */
}

最小幅を元の幅に変更します。

1
LOTUSMS