web-dev-qa-db-ja.com

ドロップダウンメニューがBootstrap

私はブートストラップで 基本的なドロップダウンメニュー を取得しようとしています：

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="js/bootstrap.min.js"></script>

    <div class="dropdown">
      <!-- Link or button to toggle dropdown -->
      <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
        <li><a tabindex="-1" href="#">Action</a></li>
        <li><a tabindex="-1" href="#">Another action</a></li>
        <li><a tabindex="-1" href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Separated link</a></li>
      </ul>
    </div>

  </body>
</html>

ただし、何も表示されません。ローカルのCSSファイルとJSファイルが正しく参照されていることを知っています。私の知る限り、デフォルトのJSにはすべてのプラグインが含まれています。

編集：フィードバックをありがとうございました。スニペットをコピーして貼り付ける前に、チュートリアルで さらに下に 移動するように追加することしかできません。

twitter-bootstraptwitter-bootstrap-2
9
ezequiel-garzon

あなたのコードは基本的に良かったと思いますが、ドロップダウンをトリガーするためのリンクがありません。これを参照してください jsFiddle

追加したことに注意してください

<a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>

これを 完全なナビゲーションバー に含める方法の例を次に示します。

幸運を！

15
David Taiaroa

コメントに特に注意してください<-- Link or button to toggle dropdown -->あなたのコードで。ドロップダウンをアクティブにするには、data-toggle = "dropdown"プロパティを持つリンクまたはボタンを配置する必要があります。

これを試して ：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="dropdown">
  <!-- Link or button to toggle dropdown -->

  <a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">
    <i class="icon-user"></i> TestDropdown
    <span class="caret"></span>
  </a>
  <a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">
    <i class="icon-user"></i> TestDropdown
    <span class="caret"></span>
  </a>
  <a class="btn btn-default" data-toggle="dropdown"> Dropdown Test </a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    <li><a tabindex="-1" href="#">Action</a></li>
    <li><a tabindex="-1" href="#">Another action</a></li>
    <li><a tabindex="-1" href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>
3
Mukesh kumar

docs から：

ドロップダウンメニューだけを見ると、必要なHTMLは次のとおりです。ドロップダウンのトリガーとドロップダウンメニューを.dropdown、または位置を宣言する別の要素：relative;でラップする必要があります。次に、メニューを作成します。

したがって、おそらくdropdownクラスのCSSを（少なくとも）position: relative;に設定する必要があります。また、デフォルトではdisplay:noneに.dropdown-menuがあります。また、それをオーバーライドしてみてください。

2
Miha Rekar

Divの代わりに、親ulとliを試して、上記で投稿したulをラップします。例えば、

    <ul class="nav nav-pills span7 pull-right" id="upper_username_hide">
       <li class= "dropdown" data-dropdown="dropdown">
         <a id="" class="dropdown-toggle" data-toggle="dropdown" href="#">
          <b class="caret dropdown-toggle"></b>
         </a>
         <ul class="dropdown-menu" >
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
        </ul>
      </li>
    </ul>

bootstrap cssが処理するので、tab-indexが必要になるとは思いません。頑張ってください！

1
Rajarshi

私の場合、.dropdown-menu bootstrapクラスがtopプロパティを：top: 100%に設定していたため、ドロップダウンがビューポートの外に表示されていました。別のクラスで最高の価値があり、現在機能しています。

0
Ruben