web-dev-qa-db-ja.com

LESSを使用せずにブートストラップナビゲーションバーの折りたたみブレークポイントを変更する

現在ブラウザの幅が768pxを下回ると、ナビゲーションバーは折りたたみモードに変わります。この幅を1000pxに変更したいので、ブラウザが1000pxを下回ると、ナビゲーションバーは折りたたみモードに変わります。私はLESSを使わずにこれをやりたいのですが、LESSではなくスタイラスを使っています。

私の問題はこの質問と同じです： Bootstrap 3 Navbar折りたたみ

しかし、その質問のすべての答えはLESS変数を変えることによってそれをする方法を説明します。私はLESSを扱っていません、私はスタイラスを使っているので、これがスタイラスか他の方法を使ってどうやってされることができるか知りたいです。

ありがとうございます。

csstwitter-bootstrapresponsive-designnavbarcollapse
183
Nearpoint

あなたは特定の メディアクエリを書く必要があります これのために、あなたの質問から、768px以下でナビゲーションバーは崩壊するでしょう、それでちょうどそのように、それを768px以上そして1000px以下でそれを適用してください：

@media (min-width: 768px) and (max-width: 1000px) {
   .collapse {
       display: none !important;
   }
}

これにより、ブートストラップユニットがデフォルトで出現するまでナビゲーションバーの折りたたみが非表示になります。折りたたみクラスが反転すると、ナビゲーションバーの内側のアセットが自動的に非表示になります。賢明な方法では、CSSをデザインに合わせて設定する必要があります。

48
SaurabhLP

bootstrap3 で、この変数 @ grid-float-breakpoint を必要な変数に変更します。デフォルト値は768pxです

44
fengd

最後に http://getbootstrap.com/customize/ で '@ grid-float-breakpoint'をいじることによって折りたたみ幅を変更する方法を解決しました。

Bootstrap.cssの2923行目（最小バージョンも）に移動し、@media screen and (min-width: 768px) {を@media screen and (min-width: 1000px) {に変更します。

そのため、コードは次のようになります。

@media screen and (min-width: 1000px) {
  .navbar-brand {
    float: left;
    margin-right: 5px;
    margin-left: -15px;
  }
  .navbar-nav {
    float: left;
    margin-top: 0;
    margin-bottom: 0;
  }
  .navbar-nav > li {
    float: left;
  }
  .navbar-nav > li > a {
    border-radius: 0;
  }
  .navbar-nav.pull-right {
    float: right;
    width: auto;
  }
  .navbar-toggle {
    position: relative;
    top: auto;
    left: auto;
    display: none;
  }
  .nav-collapse.collapse {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }
}
23
Stephen

Bootstrap 3の.LESS ソースコード には、variables.lessという変数に@grid-float-breakpointという名前で定義されているものがあります。

//**Point at which the navbar becomes uncollapsed
@grid-float-breakpoint: @screen-sm-min;

一致する@grid-float-breakpoint-max値は、そのマイナス1pxに設定されます。

//**Point at which the navbar begins collapsing
@grid-float-breakpoint-max: (@grid-float-breakpoint-max - 1);

溶液：

そのため、代わりに@grid-float-breakpoint値を1000pxに設定し、bootstrap.lessをbootstrap.cssに再構築するだけです。

例えば.

@grid-float-breakpoint: 1000px;
12
Gone Coding

次のCSSコードを使用してこれを成功させました。

@media(max-width:1000px)  {

    .navbar-collapse.collapse {
        display: none !important;
    }

    .navbar-collapse {
        overflow-x: visible !important;
    }

    .navbar-collapse.in {
      overflow-y: auto !important;
    }

    .collapse.in {
      display: block !important;
    }

}
12
ruperto17

ブートストラップ変数を変更するためのSassによる方法は、実際には bootstrap-sass githubページに記載されています。

ブートストラップを@importする前に、単に変数を再定義してください。

$grid-float-breakpoint: 1000px;

@import 'bootstrap';
10
tropicalfish

@Skely answerに加えて、ナビゲーションバー内の ドロップダウンメニュー を機能させるために、オーバーライドするクラスも追加します。以下の最終コードは以下のとおりです。

    @media (min-width: 768px) and (max-width: 991px) {
        .navbar-nav .open .dropdown-menu {
            position: static;
            float: none;
            width: auto;
            margin-top: 0;
            background-color: transparent;
            border: 0;
            -webkit-box-shadow: none;
            box-shadow: none;
        }
        .navbar-nav .open .dropdown-menu > li > a {
            line-height: 20px;
        }
        .navbar-nav .open .dropdown-menu > li > a,
        .navbar-nav .open .dropdown-menu .dropdown-header {
            padding: 5px 15px 5px 25px;
        }
        .dropdown-menu > li > a {
            display: block;
            padding: 3px 20px;
            clear: both;
            font-weight: normal;
            line-height: 1.42857143;
            color: #333;
            white-space: nowrap;
        }
        .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;*/
            margin: 7.5px 50px 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;
        }
    }

デモコード

7
jacvalle

ブートストラップv4では、ナビゲーションは遅かれ早かれ異なるCSSクラスを使って折りたたむことができます

例えば：

  • navbar-toggleable-sm
  • navbar-toggleable-md
  • navbar-toggleable-lg

ナビゲーションボタン付き：

  • 隠された
  • 隠されたMDアップ
  • 隠された
4
Eddie Jaoude

Bootstrap 3.3では、これが必要な唯一のコードです。

@media (min-width: 768px) and (max-width: 1000px) {
   .navbar-collapse.collapse {
       display: none !important;
   }
   .navbar-toggle{
        display: block !important;
   }
   .navbar-header{
        float: none;
   }
}
3
VeeK

これは私のために働いたBootstrap3

@media (min-width: 768px) {
    .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-collapse.collapse.in {
          display: block!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;
      }
}

これら2つを理解するためにしばらく時間がかかりました：

.navbar-collapse.collapse {
   display: none!important;
}
.navbar-collapse.collapse.in {
   display: block!important;
}
2
Khaled

あなたの最善の策はあなたが使うCSSプロセッサのポートを使うことでしょう。

私はSASSの大ファンなので、現在は https://github.com/thomas-mcdonald/bootstrap-sass を使用しています。

ここにStylus用のフォークがあるようです： https://github.com/Acquisio/bootstrap-stylus

そうでなければ、検索＆置換は、CSSバージョンであなたの親友です...

2
allaire

こんにちは私はあなたがブレークポイントブートストラップメニューを変更することができますこのようにCSSを使用してそれを行うことができると思います

    @media (max-width: 1200px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }

    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important; 
    }
    .navbar-nav>li {
        float: none;
    } 
    .collapse.in{
        display:block !important;
    }
   .navbar-nav .open .dropdown-menu {
       position: static;
       float: none;
       width: auto;
       margin-top: 0;
       background-color: transparent;
       border: 0;
       -webkit-box-shadow: none;
       box-shadow: none;
    }
}
1
Yasssine ELALAOUI

ブートストラップ4で、navbar-expand- *がハンバーガー（navbar-toggler）を展開したり折りたたんだり隠したりするときに上書きしたい場合は、bootstrap.cssでそのスタイル/定義を見つけて、それを再定義する必要がありますcustomstyle.cssを所有します（そうでない場合は直接bootstrap.cssに格納します）。

例えば。私はnavbar-expand-lgを崩壊させて、950pxでnavbar-togglerを見せたかった。 bootstrap.cssで私は見つけます：

@media (max-width: 991.98px) {
  .navbar-expand-lg > .container,
  .navbar-expand-lg > .container-fluid {
    padding-right: 0;
    padding-left: 0;
  }
}

そしてその下に...

@media (min-width:992px) { 
    ... lots of styling ...
}

両方の@mediaクエリーをコピーしてそれらを私のstyle.cssに貼り付け、それから私のニーズに合うようにサイズを修正しました。私の場合は950pxで崩壊させたかったのです。 @mediaクエリは異なるサイズにする必要があります（私は推測しています）ので、コンテナのmax-widthを949.98pxに設定し、他の@mediaクエリに950pxを使用したので、次のコードがstyle.cssに追加されました。これは私がStackoverflowや他の場所で見つけたねじれた解決策から解くのは容易ではありませんでした。お役に立てれば。

@media (max-width: 949.98px) {
    .navbar-expand-lg > .container,
    .navbar-expand-lg > .container-fluid {
        padding-right: 0;
        padding-left: 0;
    }
}

@media (min-width: 950px) {
    .navbar-expand-lg {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }
    .navbar-expand-lg .navbar-nav {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
    }
    .navbar-expand-lg .navbar-nav .dropdown-menu {
        position: absolute;
    }
    .navbar-expand-lg .navbar-nav .dropdown-menu-right {
        right: 0;
        left: auto;
    }
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
    .navbar-expand-lg > .container,
    .navbar-expand-lg > .container-fluid {
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }
    .navbar-expand-lg .navbar-collapse {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-preferred-size: auto;
        flex-basis: auto;
    }
    .navbar-expand-lg .navbar-toggler {
        display: none;
    }
    .navbar-expand-lg .dropup .dropdown-menu {
        top: auto;
        bottom: 100%;
    }
}
0
Jack Mason

これが私にとってのトリックでした。

@media only screen and (min-width:769px) and (max-width:1000px){
.navbar-collapse.collapse {
    display: none !important;
}
.navbar-collapse.collapse.in {
    display: block !important;
}
.navbar-header .collapse, .navbar-toggle {
    display:block !important;
}
0
jeanverster

ここで私の作業コードはReact with Bootstrapで使っています

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin="anonymous">
<style>
  @media (min-width: 768px) and (max-width: 1000px) {
   .navbar-collapse.collapse {
       display: none !important;
   }
   .navbar-toggle{
        display: block !important;
   }
   .navbar-header{
        float: none;
   }
}
  </style>
0
webmastx