web-dev-qa-db-ja.com

Twitterブートストラップ応答を使用してnavbarの折りたたみしきい値を変更する方法

私はTwitter Bootstrap 2.0.1をRails 3.1.2プロジェクトで使用しており、bootstrap-sassで実装されています。 bootstrap.cssとbootstrap-responsive.cssの両方のファイル、およびbootstrap-collapse.js Javascriptをロードしています。

例 に似たnavbarを使用した流動的なレイアウトがあります。これはnavbarの「レスポンシブバリエーション」の指示に従います here 。正常に機能します。ページが約940pxよりも狭い場合、ナビゲーションバーは折りたたまれ、クリックして展開できる「ボタン」が表示されます。

しかし、私のnavbarは約550pxの幅まで見栄えが良い、つまり、画面が非常に狭い場合を除き、折りたたむ必要はありません。

Bootstrapに画面の幅が550px未満の場合にのみnavbarを折りたたむように指示するにはどうすればよいですか？

この時点で、notは他のレスポンシブな振る舞いを変更したいことに注意してください。要素を並べて表示する代わりにスタックします。

cssruby-on-rails-3twitter-bootstrap
94
Mark Berry

bootstrap-responsive.cssの239行目を探しています

@media (max-width: 979px) {...}

max-width値がレスポンシブナビゲーションをトリガーする場所。 550px程度に変更すると、サイズが正常に変更されます。

41
methodofaction

ブートストラップ> 2.1 && <3

  • ブートストラップの少ないバージョンを使用する
  • Variables.lessで@navbarCollapseWidth変数を変更します
  • 再コンパイルします。

2013年更新：簡単な方法

（コメントを介したArchonicへのTHX）

2014年の更新：Bootstrap 3.1.1および3.2（さらに ドキュメントに追加 ）

カスタマイズ である場合、または.less変数をオーバーライド/編集している場合、以下を探しています。

//** Point at which the navbar becomes uncollapsed.
@grid-float-breakpoint:     @screen-sm-min;
//** Point at which the navbar begins collapsing.
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
73
Bijan

新しい@mediaクエリを確立して、navbar要素を適切にドロップダウンできます。必要なのは、希望するドロップ幅で新しいクエリに対応するために前者をリセットすることだけです。これを例に取ります：

CSS

/** Modified Responsive CSS **/

@media (max-width: 979px) {
    .btn-navbar {
        display: none;
    }
    .navbar .nav-collapse {
        clear: none;
    }

    .nav-collapse {
        height: auto;
        overflow: auto;
    }

    .navbar .nav {
        float: left;
        margin: 0 10px 0 0;
    }

    .navbar .brand {
        margin-left: -20px;
        padding: 8px 20px 12px;
    }

    .navbar .dropdown-menu:before, .navbar .dropdown-menu:after {
        display: block;
    }

    .navbar .nav > li > a, .navbar .dropdown-menu a {
        border-radius: 0;
        color: #999999;
        font-weight: normal;
        padding: 10px 10px 11px;
    }

    .navbar .nav > li {
        float: left;
    }

    .navbar .dropdown-menu {
        background-clip: padding-box;
        background-color: #FFFFFF;
        border-color: rgba(0, 0, 0, 0.2);
        border-radius: 0 0 5px 5px;
        border-style: solid;
        border-width: 1px;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        display: none;
        float: left;
        left: 0;
        list-style: none outside none;
        margin: 0;
        min-width: 160px;
        padding: 4px 0;
        position: absolute;
        top: 100%;
        z-index: 1000;
    }

    .navbar-form, .navbar-search {
        border:none;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
        float: left;
        margin-bottom: 0;
        margin-top:6px;
        padding: 9px 15px;
    }

    .navbar .nav.pull-right {
        float: right;
        margin-left: auto;
    }
}

@media (max-width: 550px) {
    .btn-navbar {
        display: block;
    }
    .navbar .nav-collapse {
        clear: left;
    }

    .nav-collapse {
        height: 0;
        overflow: hidden;
    }

    .navbar .nav {
        float: none;
        margin: 0 0 9px;
    }

    .navbar .brand {
        margin: 0 0 0 -5px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .navbar .dropdown-menu:before, .navbar .dropdown-menu:after {
        display: none;
    }

    .navbar .nav > li > a, .navbar .dropdown-menu a {
        border-radius: 3px 3px 3px 3px;
        color: #999999;
        font-weight: bold;
        padding: 6px 15px;
    }

    .navbar .nav > li {
        float: none;
    }

    .navbar .dropdown-menu {
        background-color: transparent;
        border: medium none;
        border-radius: 0 0 0 0;
        box-shadow: none;
        display: block;
        float: none;
        left: auto;
        margin: 0 15px;
        max-width: none;
        padding: 0;
        position: static;
        top: auto;
    }

    .navbar-form, .navbar-search {
        border-bottom: 1px solid #222222;
        border-top: 1px solid #222222;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
        float: none;
        margin: 9px 0;
        padding: 9px 15px;
    }

    .navbar .nav.pull-right {
        float: none;
        margin-left: 0;
    }

}

次のコードでは、@mediaマークの前のドロップを処理する元の979pxクエリと、希望する550pxのドロップポイントをサポートする新しいクエリをどのように含めたかを確認できます。ブートストラップレスポンシブCSSから元のクエリを直接変更して、navbar要素の特定のクエリに適用されるすべてのスタイルをリセットし、代わりに必要なドロップポイントを保持する新しいクエリに移植しました。この方法では、ブートストラップ対応のスタイルシートに手を加えることなく、元のクエリから新しいクエリにすべてのスタイルを変換できます。この方法では、デフォルト値がドキュメント内の他の要素に適用されます。

必要に応じて550pxにドロップするように設定されたメディアクエリを使用した短いデモを次に示します。 http://jsfiddle.net/wU8MW/

注：新しい変更されたcssはレスポンシブcssよりも先にロードされることになっているため、上記の変更された@mediaクエリをcssフレームの下に配置しました。

11
Andres Ilich

bootstrap-sassは、次のバージョン（2.2.1.0）で変数$ navbarCollapseWidthをサポートします。そのバージョンが公開されたら、あなたが望むものを正確に実行するためにそれを更新することができます！

6
trisweb

2013年8月の時点で、Bootstrap 3「カスタマイズとダウンロード」ページは http://getbootstrap.com/customize/ にあります。

Bootstrap 3の場合、関連する変数は@ grid-float-breakpointです。

次のスタックオーバーフローページに追加の詳細があります。 Bootstrap 3 Navbar Collapse

5
StackOverflowUser

私は、これがまもなく公式な方法で実装されるのではないかと期待しています。それまでは、単純なCSSハックを行っています。ドロップダウンボタンで可視電話を使用し、ナビゲーションバーに配置した2番目のボタンセットで可視タブレットを使用しています。そのため、次のようになりました。

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a href="<%= root_url %>" class="brand brandtag"></a>
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <div class="nav-collapse">
        <ul class="nav">
          <li>Navigation 1</li>
          <li>Navigation 2</li>
          <li>Navigation 3</li>
        </ul>
      </div>
    </div>
  </div>
</div>

そして今、それは次のようになります：

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a href="<%= root_url %>" class="brand brandtag"></a>
      <a class="btn btn-navbar visible-phone" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <div class="visible-tablet">
        <ul class="nav">
          <li>Navigation 1</li>
          <li>Navigation 2</li>
          <li>Navigation 3</li>
        </ul>
      </div>
      <div class="nav-collapse">
        <ul class="nav">
          <li>Navigation 1</li>
          <li>Navigation 2</li>
          <li>Navigation 3</li>
        </ul>
      </div>
    </div>
  </div>
</div>

要素の順序は重要であることに注意してください。そうしないと、次の行に入る要素に問題がある可能性があります

4
Tyler

bootstrapが必要とするすべてのパーシャルをリストした別のSCSSファイルを作成しました。これにより、サイトのニーズに応じてパーシャルのオンとオフを切り替えることができます。これにより、ブレークポイント変数を簡単にオーバーライドできます。ここに私が得たものがあります：

// Core variables and mixins
$grid-float-breakpoint: 991px;
@import "bootstrap/variables";
@import "bootstrap/mixins";

// Reset
@import "bootstrap/normalize";
//@import "bootstrap/print";

// Core CSS
@import "bootstrap/scaffolding";
@import "bootstrap/type";
//@import "bootstrap/code";
@import "bootstrap/grid";
@import "bootstrap/tables";
@import "bootstrap/forms";
@import "bootstrap/buttons";

// Components
@import "bootstrap/component-animations";
@import "bootstrap/glyphicons";
@import "bootstrap/dropdowns";
//@import "bootstrap/button-groups";
//@import "bootstrap/input-groups";
@import "bootstrap/navs";
@import "bootstrap/navbar";
@import "bootstrap/breadcrumbs";
@import "bootstrap/pagination";
@import "bootstrap/pager";
@import "bootstrap/labels";
@import "bootstrap/badges";
//@import "bootstrap/jumbotron";
//@import "bootstrap/thumbnails";
@import "bootstrap/alerts";
//@import "bootstrap/progress-bars";
//@import "bootstrap/media";
//@import "bootstrap/list-group";
@import "bootstrap/panels";
//@import "bootstrap/wells";
@import "bootstrap/close";

// Components w/ JavaScript
@import "bootstrap/modals";
@import "bootstrap/tooltip";
//@import "bootstrap/popovers";
//@import "bootstrap/carousel";

// Utility classes
@import "bootstrap/utilities";
@import "bootstrap/responsive-utilities";
3
mae

ここに私のコードがあります（他のすべてのソリューションは、ナビゲーションバーがドロップダウンするときにファンキーなスクロールバーを示したので、コードを編集したので、そうではありませんでした）。他の回答を投稿できなかったので、他の人が見つけられるようにここでやります。 Rails 3.0でこれを行うには、Bootstrapを使用しています。

asset/stylesheets/framework and overrides this paste：（目標を達成するために最大幅を任意の値に調整します。）

@media (max-width: 2500px) {
.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;
}
.navbar-nav>li {
    float: none;
}
.navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
}
2
pirate694

ブートストラップ3.x

sASSを使用すると、$ screen-smの値を変更して最小サイズをターゲットにできます

例：$ screen-sm：600px;

この値をapplication.scssファイルの@import "bootstrap"の前に配置する必要があります。

$screen-sm:600px;
@import "bootstrap";

インポート前に変数をオーバーライドするために、「@」で始まる変数は「$」に変更されただけです。

変数のリストです。

1
coding addicted

ブートストラップ3.x

LESSを使用すると、@screen-smallの値を変更して最小サイズをターゲットにできます。

例：@screen-small: 600px;

幅が600px未満になった場合にのみ、「小さなデバイス」モードに切り替えるためにこれを使用します

1
JasonS

これは、Bootstrap CSSファイルのLESSバージョンを使用できる好例です。これを行う方法は以下のとおりです。

さらに良いことは、これをGithubのプルリクエストとして送信して、誰もが利益を得られるようにし、「カスタムコード」がBootstrapの一部になることです。

  • Navbarをいつ折り畳むかを指定する変数をvariables.lessに追加します。次のようなもの：@navCollapseWidth: 979px
  • 次にresponsive-navbar.less... を変更します
    • 一番上の変更@media (max-width: 979px)から@media (max-width: @navCollapseWidth)へ
    • 下部で@media (min-width: 980px)を@media (max-width: @navCollapseWidth - 1)に変更します

もちろん... 推奨メソッド のいずれかを使用してLESSをコンパイルする必要があります。

0
Jason Capriotti

ブートストラップ4.x

Bootstrap 4.xの折りたたみしきい値を変更するのは簡単です。 6つのケースがあります。

  1. 常に展開し、折りたたむことはありません（つまり、ブレークポイントは0pxです）：<nav class="navbar navbar-expand">...</nav>
  2. ブレークポイントはsm（576px）：<nav class="navbar navbar-expand-sm">...</nav>
  3. ブレークポイントはmd（768px）：<nav class="navbar navbar-expand-md">...</nav>
  4. ブレークポイントはlg（992px）：<nav class="navbar navbar-expand-lg">...</nav>
  5. ブレークポイントはxl（1200px）：<nav class="navbar navbar-expand-xl">.../nav>
  6. 常に折りたたみ、展開しない（つまり、ブレークポイントは∞px）。 ：<nav class="navbar">...</nav>（navbar-expand-*クラスを削除するだけです。Bootstrap 4.xのようにモバイル優先）

キャロル・スケリーによるこの記事の功績は、私が見つけた https://medium.com/wdstack/examples-bootstrap-4-navbar-b3c9dc0edc1a

0
jinhr

visible-phoneクラスブロックとhidden-phoneクラスをメインの折りたたみナビゲーションのアイテムに追加することで、タイラーのハッキングをさらに進めて、1つを「プル」するか、折りたたまれた2つのアイテムは、電話のナビゲーションバーにも表示されます。

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a href="<%= root_url %>" class="brand brandtag"></a>
      <a class="btn btn-navbar visible-phone" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <div class="visible-tablet">
        <ul class="nav">
          <li>Navigation 1</li>
          <li>Navigation 2</li>
          <li>Navigation 3</li>
        </ul>
      </div>
      <div class="visible-phone">
        <ul class="nav">
          <li>Navigation 1</li>
        </ul>
      </div>
      <div class="nav-collapse">
        <ul class="nav">
          <li class="hidden-phone">Navigation 1</li>
          <li>Navigation 2</li>
          <li>Navigation 3</li>
        </ul>
      </div>
    </div>
  </div>
</div>
0
althras

このコードをカスタムstyle.cssファイルに書き留めてください。動作します

@media (min-width: 768px) and (max-width: 991px) {
        .navbar-collapse.collapse {
            display: none !important;
        }
        .navbar-collapse.collapse.in {
            display: block !important;
        }
        .navbar-header .collapse, .navbar-toggle {
            display:block !important;
        }
        .navbar-header {
            float:none;
        }
        .navbar-nav {
            float: none !important;
            margin: 0px;
        }
        .navbar-nav {
            margin: 7.5px -15px;
        }
        .nav > li {
            position: relative;
            display: block;
        }
        .navbar-nav > li {
            float: none !important;
        }
        .nav > li > a {
            position: relative;
            display: block;
            padding: 10px 15px;
        }
        .navbar-collapse {
            padding-right: 15px;
            padding-left: 15px;
            overflow-x: visible;
            border-top: 1px solid transparent;
            box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.1) inset;
        }
        .nav {
            padding-left: 0px;
            margin-bottom: 0px;
            list-style: outside none none;
        }
    }
0
Ganpat Kakar