9

したがって、私は Bootstrap 3 を使い始めたばかりで、ヘッダーを上部に固定し、ヘッダーのコンテンツを本文のコンテンツと垂直方向に揃え、最後にレスポンシブにしたいと考えています。

折りたたまれたナビゲーションバーをクリックしても機能しないように見えることを除いて、すべて正常に機能します。3 本のバーが重なっている小さなアイコンをクリックしても、下にリストが表示されません。

これは非常に基本的な間違いかもしれませんが、ここでこの子供をクリックしても機能しません。

折りたたまれたナビゲーションバー

ヘッダーのクラスに何か問題があるのではないかと思います。

これは私のコードです:

<header class="navbar  navbar-default navbar-fixed-top" role="banner">
<div class="col-10">
<div class="container">
  <div class="navbar-header">
    <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-ex1-collapse">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
      <a class="navbar-brand" href="#">Logo Text</a>
  </div>

  <nav class="collapse navbar-collapse" role="navigation">
    <ul class="nav navbar-nav navbar-right">
      <li class="home_button"> <a href="#"> <span class="glyphicon glyphicon-home"></span> </a> </li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li> <a href="#" > My Account </a> </li><br>
          <li> <a href="#"> Logout </a> </li>
        </ul>
      </li>
    </ul>
  </nav>
  </div>
</div>
</header>

カスタムCSSにある唯一のものは次のとおりです。

@media (min-width: 980px){
    body{
        padding-top: 70px;
    }
}

しかし、それがこの問題を引き起こしているとは思いません。

HTMLのヘッダーの前に含めたものは次のとおりです。

<script src="/static/js/jquery-1.10.2.min.js"></script>
<script src="/static/js/jquery-migrate-1.2.1.js"></script>
<script type="text/javascript" src="/static/js/bootstrap-3.0.0-min.js"></script>
<link href="/static/css/bootstrap-3.0.0.css" rel="stylesheet" media="screen">
<link href="/static/app/bssgame2/css/my_custom.css" rel="stylesheet" media="screen">

これらはすべて私のローカルディレクトリにあります。

「折りたたみが機能しない」/「折りたたみクリックが機能しない」を検索すると、このアイコン自体が表示されないという問題に関連していると思われる結果がたくさん表示されます。

ブートストラップに付属の collapse.js を含めても、この問題は解決しませんでした。

4

2 に答える 2

19

navbar の折りたたみには折りたたみプラグインを使用します。 http://getbootstrap.com/javascript/#collapseを参照してください。したがって、 data-toggle="collapse" と data-target をナビゲーション バー ボタンに追加します。そして、data-target に使用されるのと同じクラスを navbar の nav 要素に追加します。

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse">

と：

  <nav class="collapse navbar-collapse" role="navigation">

Bootstrap v3 から Bootstrap v4 への移行の詳細については、こちらのドキュメントを参照してください。

于 2013-09-25T19:38:14.860 に答える