14

2.1.1 Twitter Bootstrap を使用して、ページの上部に固定されているが全幅ではないナビゲーション バーを作成しようとしています。

<div class="container">
  <div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container">
        <a class="brand" href="#">Project name</a>
        <div class="nav-collapse collapse">
          <ul class="nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>
  </div>
</div>

navbar-fixed-top クラスを削除すると:

  <div class="navbar navbar-fixed-top">

に

  <div class="navbar">

その後、ナビゲーションバーは希望どおりに表示されます-全幅ではなく幅940ピクセルのみ-しかし、もちろん、ページの上部に固定されなくなりました. このナビゲーション バーを全幅にせずにページの上部に固定するにはどうすればよいですか?

4

5 に答える 5

6

navbar-fixed-top または nav-bar-fixed-bottom は、全幅やあらゆる画面サイズに対応することなく作成できます。

ステップ 1: これらの css を追加します :( という css クラスを作成します: .navbar-fixed-width)

@media all and (min-width: 768px) {
  .navbar-fixed-width {
    width: 768px;
    margin-left: auto;
    margin-right:auto;
 }
}

@media all and (min-width: 992px) {
  .navbar-fixed-width {
    width: 992px;
    margin-left: auto;
    margin-right:auto;
  }

}

@media all and (min-width: 1200px) {
  .navbar-fixed-width {
    width: 1200px;
    margin-left: auto;
    margin-right:auto;
  }
}

ステップ 2:.navbar-fixed-widthこのようなナビゲーションへのクラス。

<div class="navbar navbar-inverse navbar-fixed-top navbar-fixed-width" role="navigation">
    <div class="container">
         <div class="navbar-header">
         </div>
    </div>
</div>
于 2014-12-31T19:28:04.383 に答える
5

Bootstrap の位置を固定に設定することでオーバーライドできますabsolute。ページとともにスクロールさせたくない場合に使用します。

.navbar {
    position: fixed !important;
    top: 0px;
    width: 940px;
}

(複数のナビゲーション バーを使用する予定がある場合は、ID を指定することを検討してください)

于 2012-09-24T20:08:49.747 に答える
2

元のマークアップを使用して、単純にスタイルを設定できます（クラス'navbar'を必要な幅に使用します。

.navbar {
width: 50%;
}

<div class="container">
  <div class="navbar navbar-fixed-top">

こちらのチュートリアルを参照してください：

http://www.webdesignforbeginners.info/bootstrap-simple-navbars/

于 2013-02-18T17:41:28.520 に答える
0

Tommy Nguyen ソリューションの場合は少なくなります。

.navbar-fixed-width {
  margin-left: auto;
  margin-right: auto;

  @media all and (min-width: @screen-sm-min) {
    width: @screen-sm-min;
  }

  @media all and (min-width: @screen-md-min) {
    width: @screen-md-min;
  }

  @media all and (min-width: @screen-lg-min) {
    width: @screen-lg-min;
  }
}
于 2016-02-23T21:49:59.917 に答える
0

divナビゲーションバーを でラップすると、 Bootstrap 3+ は動的classな幅を処理できるはずです。container幅は利用可能なスペースに応じて動的になります。

詳細については、 Bootstrap cssのcontainerセクションを参照してください。

于 2014-02-23T17:55:43.507 に答える