225

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

私の問題は、この質問と同じです: Bootstrap 3 Navbar Collapse

しかし、その質問のすべての回答は、LESS 変数を変更することによってそれを行う方法を説明しています。私はLESSを扱っていません。スタイラスを使用しているので、スタイラスまたは別の方法を使用してこれを行う方法を知りたいです。

ありがとう！

4

19 に答える 19

458

2018年アップデート

ブートストラップ 4

navbar-expand-*クラスを使用すると、Bootstrap 4 でナビゲーションバーのブレークポイントを簡単に変更できます。

<nav class="navbar fixed-top navbar-expand-sm">..</nav>

  • navbar-expand-sm= xs 画面のモバイル メニュー <576px
  • navbar-expand-md= SM 画面のモバイル メニュー <768px
  • navbar-expand-lg= md 画面のモバイル メニュー <992px
  • navbar-expand-xl= lg 画面のモバイル メニュー <1200px
  • navbar-expand= モバイル メニューを使用しない
  • (no expand class)= 常にモバイル メニューを使用

navbar-expand-*モバイルメニューを除外すると、all幅で使用されます。以下は、6 つの navbar 状態すべてのデモです: Bootstrap 4 Navbar Example

CSS を少し追加して、カスタム ブレークポイント (???px) を使用することもできます。たとえば、これは 1300px です。

@media (min-width: 1300px){
    .navbar-expand-custom {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    .navbar-expand-custom .navbar-nav {
        flex-direction: row;
    }
    .navbar-expand-custom .dropdown-menu {
        position: absolute;
    }
    .navbar-expand-custom .nav-link {
        padding-right: .5rem;
        padding-left: .5rem;
    }
    .navbar-expand-custom > .container {
        flex-wrap: nowrap;
    }
    .navbar-expand-custom .navbar-collapse {
        display: flex!important;
        flex-basis: auto;
    }
    .navbar-expand-custom .navbar-toggler {
        display: none;
    }
}

Bootstrap 4カスタムNavbar ブレークポイント
Bootstrap 4 Navbar ブレークポイントの例

**ブートストラップ 3**

Bootstrap 3.3.x の場合、navbar ブレークポイントをオーバーライドする作業CSS は次のとおりです。991pxナビゲーションバーを折りたたむポイントのピクセル寸法に変更します...

@media (max-width: 991px) {
  .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;
  }
}

991px の作業例: http://www.bootply.com/j7XJuaE5v6
1200px の 作業例: https://www.codeply.com/go/VsYaOLzfb4 (検索フォームあり)

注: 上記は768px を超えるものに対して機能します。768px 未満に変更する必要がある場合は、768px 未満の例をここに示します。

于 2016-03-29T16:06:56.130 に答える
57

これには特定のメディア クエリを記述する必要があります。質問から、768px より下ではナビゲーション バーが折りたたまれます。そのため、768px の上と 1000px の下にそれを適用します。

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

これにより、ブートストラップ ユニットがデフォルトで発生するまでナビゲーション バーの折りたたみが非表示になります。折りたたみクラスが反転すると、navbar 折りたたみ内の内部アセットが自動的に非表示になります。同様に、必要なデザインとして css を設定する必要があります。

于 2013-11-07T05:24:12.803 に答える
13

次の 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;
    }

}
于 2015-03-18T21:06:11.787 に答える
13

Bootstrap 3 .LESSソース コードには、次の役立つコメントが含まれる、 variables.lesscalledで定義された変数があります。@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;
于 2015-08-03T13:35:34.693 に答える
8

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

    @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;
        }
    }

デモコード

于 2016-05-27T05:25:25.457 に答える
4

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

例えば：

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

ナビゲーション用のボタンを使用:

  • 隠しSMアップ
  • 隠しMDアップ
  • 非表示の lg-up
于 2016-05-02T17:11:42.560 に答える
4

This worked for me 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;
      }
}

Took a while to figure these two out:

.navbar-collapse.collapse {
   display: none!important;
}
.navbar-collapse.collapse.in {
   display: block!important;
}
于 2017-11-15T00:51:35.377 に答える
3

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;
   }
}
于 2016-04-08T11:23:34.870 に答える
2

最善の策は、使用している CSS プロセッサのポートを使用することです。

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

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

それ以外の場合は、css バージョンで Search & Replace が最適です...

于 2013-11-07T04:21:21.020 に答える
0

これは私のためにトリックをしたものです：

@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;
}
于 2016-06-03T07:25:09.243 に答える
0

ここで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>
于 2018-03-17T07:10:58.170 に答える