大画面

Question

誰かが与えられた画像の3ラインメニューボタンをクリックしたときに表示される4つのリンクがありますのために3行のメニューを作成します。 私の問題は、このメニューが小さな画面で機能することです。私は767pxのような大画面でこの機能を表示することでこの機能をオーバーライドしたいと思っています。私は自分のCSSファイルのどこにコードを置くべきか混乱しています。 助けてください！

Css_File

@charset "utf-8"; 
/* CSS Document */ 

.navbar-default[role="transparent_navbar"] 
{ 

    background-color: white; 
    border-color: white; 
} 
.navbar-default { 
    background-color: #787878; 
    border-color: #5e5b60; 
} 
.navbar-default .navbar-brand { 
    color: #6ecd6e; 
} 
.navbar-default .navbar-brand:hover, 
.navbar-default .navbar-brand:focus { 
    color: #ffb600; 
} 
.navbar-default .navbar-text { 
    color: #6ecd6e; 
} 
.navbar-default .navbar-nav > li > a { 
    color: #6ecd6e; 
} 
.navbar-default .navbar-nav > li > a:hover, 
.navbar-default .navbar-nav > li > a:focus { 
    color: #ffb600; 
} 
.navbar-default .navbar-nav > li > .dropdown-menu { 
    background-color: #787878; 
} 
.navbar-default .navbar-nav > li > .dropdown-menu > li > a { 
    color: #6ecd6e; 
} 
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:hover, 
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:focus { 
    color: #ffb600; 
    background-color: #5e5b60; 
} 
.navbar-default .navbar-nav > li > .dropdown-menu > li > .divider { 
    background-color: #5e5b60; 
} 
.navbar-default .navbar-nav .open .dropdown-menu > .active > a, 
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, 
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus { 
    color: #ffb600; 
    background-color: #5e5b60; 
} 
.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus { 
    color: #ffb600; 
    background-color: #5e5b60; 
} 
.navbar-default .navbar-nav > .open > a, 
.navbar-default .navbar-nav > .open > a:hover, 
.navbar-default .navbar-nav > .open > a:focus { 
    color: #ffb600; 
    background-color: #5e5b60; 
} 
.navbar-default .navbar-toggle { 
    border-color: #5e5b60; 
} 
.navbar-default .navbar-toggle:hover, 
.navbar-default .navbar-toggle:focus { 
    background-color: #5e5b60; 
} 
.navbar-default .navbar-toggle .icon-bar { 
    background-color: #6ecd6e; 
} 
.navbar-default .navbar-collapse, 
.navbar-default .navbar-form { 
    border-color: #6ecd6e; 
} 
.navbar-default .navbar-link { 
    color: #6ecd6e; 
} 
.navbar-default .navbar-link:hover { 
    color: #ffb600; 
} 

@media (max-width: 767px) { 
    .navbar-default .navbar-nav .open .dropdown-menu > li > a { 
    color: #6ecd6e; 
    } 
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, 
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { 
    color: #ffb600; 
    } 
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a, 
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, 
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus { 
    color: #ffb600; 
    background-color: #5e5b60; 
    } 
} 

Answer 1

に次のCSSを追加します。

• 767px以上の幅で画面にフルナビゲーションバーを表示します。

• 幅が767px以下の画面に3行を表示します。

  @media (min-width: 767px) 
      // add style for full navbar 
  
  @media (max-width: 767px) 
      // add style for 3-line navbar 
  

Answer 2

別questionの答えから、 はメディアクエリを使用せずに、カスタムCSSで次のスタイルを書きます。このコードは、メディアクエリを上書きすると、すべての画面サイズで自分の貴重な時間を過ごすために皆のための

.navbar-header { 
    float: none; 
} 
.navbar-toggle { 
    display: block; 
} 
.navbar-collapse.collapse { 
    display: none!important; 
} 
.navbar-nav { 
    float: none!important; 
} 
.navbar-nav>li { 
    float: none; 
} 
.navbar-collapse.collapse.in{ 
    display:block !important; 
} 

Answer 3

感謝を3ラインメニューボタンが表示されます。 私は

https://coderwall.com/p/wpjw4w/change-the-bootstrap-navbar-breakpoint

下記のリンクから正しい答えを見つけた私は、以下のCSSコードを実装し、私が探していたまさに解決策を見つけました。

コード

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

Answer 4

あなたは、このリンクに続いて、このためにJasnyのプラグインを試すことができます： - Jasny Plugin For Offcanvas Bootstrap Menu