web-dev-qa-db-ja.com

768pxディスプレイCSSメディアクエリでメニューが折りたたまれないようにする

Twitterブートストラップを使用してサイトを作成しようとしています。メニューの数が比較的少ないので、768pxディスプレイにも適合します。しかし、bootstrap=では、メディアクエリを使用してメニューが折りたたまれます。この動作を防ぐことはできません。

The menu when not collapsed

Then menu collapses ones width less than 768px

これは私のhtmlです

<div class="row">
    <div class="span3 logo"><h1><img src="img/logo.png" /></h1></div>
    <div class="span9">

        <div class="navbar">
          <div class="navbar-inner">
            <div class="container">
         <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 nav-pills">
                  <li><a href="#">Home</a> </li>
                  <li><a href="#">Services</a> </li>
                  <li><a href="#">Portfolio</a> </li>
                  <li><a href="#">Contact Us</a> </li>
                </ul>
              </div>
            </div>
          </div>
        </div>



    </div>
    </div>

ブートストラップのメディアクエリと関係があることはわかっていますが、理解できません。

csstwitter-bootstrapmedia-queriesresponsive-design
26
esafwan

セクションを読み上げてください：メディアクエリの使用bootstrap site： http：// getbootstrap。 com/2.3.2/scaffolding.html＃responsive （Bootstrap 2.3.2） http://getbootstrap.com/getting-started/#disable-responsive （Bootstrap 3）

関連するメディアクエリを使用して、ビューポートが縮小するときにスタイルbootstrap addsをオーバーライドします。

  // Landscape phones and down
  @media (max-width: 480px) { ... }

  // Landscape phone to portrait tablet
  @media (max-width: 768px) { ... }

  // Portrait tablet to landscape and desktop
  @media (min-width: 768px) and (max-width: 980px) { ... }

  // Large desktop
  @media (min-width: 1200px) { .. }

ナビゲーションバーを折りたたみたくない場合は、クラス名から「折りたたみ」を削除します。あなたはおそらく取り除く必要があります：

<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

要するに、ドキュメントに目を通すと、「オプションのレスポンシブバリエーション」というタイトルのこの詳細をカバーするセクションがあります： http://getbootstrap.com/2.3.2/components.html#navbar （ブートストラップ2.3.2）

16
Galaxy

TwitterをカスタマイズできますBootstrap css compiling sass-Twitter-bootstrap scssファイルから設定し、$navbarCollapseWidth in _variables.scss希望の値に...

編集

@Accipheranがコメントで述べたように、Bootstrap 3.xの場合、設定する変数の名前は$grid-float-breakpoint。

32
pine3ree

これは私にとってはうまくいきました：

.nav-collapse, .nav-collapse.collapse {
    overflow: visible;
}   
.navbar .btn-navbar {
    display: none;
}
9
Matt Jackson

答えを読んで、あなたはBootstrapバージョン2について話していると思います。おそらく、Bootstrap 3の答えを探している人がここに来るでしょう。この答えはあなたです！

  1. ブートストラップのカスタマイズページ に移動します
  2. ハードコーディングされたもの（例：520px）または@ screen-xs-minのような小さい画面サイズの@ grid-float-breakpoint値を再定義する
  3. ページの下部にあるボタンを押して、cssファイルを再コンパイルします
  4. bootstrap.cssファイルとbootstrap-min.cssファイルを、ダウンロードしたZipファイルのファイルで置き換えます。
8
neves

変数を見つける：

@ grid-float-breakpoint

@ screen-smに設定されていますが、必要に応じて変更できます。

ベンダーレスファイルをオーバーライドする場合、変数を0pxに設定します。例：

@ grid-float-breakpoint：0px;

2
Andreas Ek

この例は、公式Webサイトからのものです。 http://getbootstrap.com/examples/non-responsive/

変更は non-responsive.css にありますが、.navbarに関連する重要な部分は次のとおりです。

body {
    padding-top: 70px;
    padding-bottom: 30px;
}
.page-header {
    margin-bottom: 30px;
}
.page-header .lead {
    margin-bottom: 10px;
}
.navbar-collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
}
.navbar-nav {
    float: left;
    margin: 0;
}
.navbar-nav > li {
    float: left;
}
1
Alastair

折りたたみnavbarを完全に無効にする場合は、カスタムLESSファイルに次の変数を追加します。

@grid-float-breakpoint: 0px;
1
Fred K

より小さな値に達するまでnavを折りたたまない場合、最も簡単な方法は Twitter Bootstrapカスタマイズページ 、変更@navbarCollapseWidthを必要な値に変更し、パッケージをダウンロードします。できた.

このページで許可されている範囲を超えてカスタマイズする場合は、他の回答で説明されているようにオーバーライドまたはカスタマイズする必要があります。

1
Ross Hambrick

bootstrap 3.3.4。これはハックですが、CSSをやり直す2日間の修正でもありません。

@media (min-width: 768px) and (max-width: 979px) {
  .navbar-header {
    width: 100% !important;
  }
  .navbar-toggle {
    display: inline-block !important;
    float: right !important;
  }
}

セレクターを微調整する必要があるかもしれませんが、基本的にはヘッダーを全幅にしてから、ボタンを右に表示してフロートさせます。

0
Michael Cole