26

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

折りたたんでいないときのメニュー

次に、メニューは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>

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

4

9 に答える 9

31

Twitter Bootstrap cssをカスタマイズして、sass-twitter-bootstrap scssファイルからコンパイル$navbarCollapseWidthし、目的の値に設定することができ_variables.scssます...

編集

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

于 2013-01-09T00:11:33.050 に答える
16

次のセクションを読むことをお勧めします：ブートストラップサイトで のメディアクエリの使用：http： //getbootstrap.com/2.3.2/scaffolding.html#response（Bootstrap 2.3.2） http://getbootstrap.com/ get-started /＃disable-response（ブートストラップ3）

関連するメディアクエリを使用して、ビューポートが縮小したときにブートストラップが追加するスタイルを上書きする必要があります。

  // 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) { .. }

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

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

要するに、ドキュメントを見てください。ここに「オプションのレスポンシブバリエーション」というタイトルのこの正確なものをカバーするセクションがあります：http： //getbootstrap.com/2.3.2/components.html#navbar（Bootstrap 2.3.2）

于 2012-04-18T06:37:38.647 に答える
9

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

.nav-collapse, .nav-collapse.collapse {
    overflow: visible;
}   
.navbar .btn-navbar {
    display: none;
}
于 2013-06-17T00:08:37.323 に答える
8

答えを読んで、あなたはBootstrapバージョン2について話していると思います。たぶん、Bootstrap3の答えを探している人がここに到着するでしょう。この答えはあなたのためです！

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

変数を見つける：

@grid-float-ブレークポイント

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

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

@ grid-float-breakpoint：0px;

于 2015-02-11T07:15:52.350 に答える
1

小さい値に達するまでナビゲーションを折りたたむだけではない場合、最も簡単な方法は、Twitter Bootstrapカスタマイズページに移動し、を必要な値に変更し@navbarCollapseWidthて、パッケージをダウンロードすることです。終わり。

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

于 2013-07-09T21:10:51.393 に答える
1

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

変更はnon- response.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;
}
于 2013-10-06T15:19:55.377 に答える
1

折りたたみするナビゲーションバーを完全に無効にする場合は、カスタムLESSファイルに次の変数を追加します。

@grid-float-breakpoint: 0px;
于 2015-04-06T08:10:26.690 に答える
0

これが私がブートストラップ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;
  }
}

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

于 2017-02-04T22:14:20.100 に答える