160

Twitterのブートストラップドロップダウンメニューを実装したいのですが、私のコードは次のとおりです:

<span class="dropdown"> 
<a href="#menu1" class="dropdown-toggle" data-toggle="dropdown" ><img class="left" src="/static/img/topmenu_preferences.png" /><b class="caret"></b></a>
<ul class="dropdown-menu">
  <li><a href="#">a</a></li>
  <li><a href="#">b</a></li>
  <li><a href="#">c</a></li>
  <li class="divider"></li>
  <li><a href="#">d</a></li>
</ul>

ドロップダウンはうまく機能し、ドロップダウンは画面の右端の横に配置され、ドロップダウンの切り替えをクリックすると、リストが画面の外に出ます。画面には次のように表示されます。

ここに画像の説明を入力

どうすれば修正できますか？

4

10 に答える 10

278

に追加.pull-rightするul.dropdown-menu必要があります

非推奨の通知: Bootstrap v3.1.0 の時点で.pull-right、ドロップダウン メニューは非推奨です。メニューを右揃えにするには、 を使用します.dropdown-menu-right。

于 2012-12-10T18:58:38.137 に答える
117

Bootstrap v3.1.0 以降.pull-right、ドロップダウン メニューでの追加は廃止されました。代わりにA.dropdown-menu-rightを追加する必要がありますul.dropdown-menu。ドキュメント

于 2014-05-21T05:23:50.303 に答える
12

.dropdown-pull-right次の css でクラスを使用できます。

.dropdown-pull-right {
  float: right !important;
  right: 0;
  left: auto;
}

.dropdown-pull-right>.dropdown-menu {
  right: 0;
  left: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>


<div class="dropdown dropdown-pull-right btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
  Open Dropdown
  <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

于 2015-07-22T06:40:54.707 に答える
3

Bootstrap 4 では .dropleft を使用できます

に変更するだけです：

<span class="dropleft">

また

ドロップダウンメニューに .dropdown-menu-{lg,med,sm,xs}-right を追加します

<div class="dropdown-menu dropdown-menu-sm-right" aria-labelledby="dropdown03">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
</div>
于 2019-05-13T02:23:32.247 に答える
0

ドキュメントによると、Bootstrap 5 を使用している場合:

ドロップライト: 親要素に .dropend を追加して、要素の右側にあるドロップダウン メニューをトリガーします。

<div class="btn-group dropend">
 <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
  Dropright
 </button>
 <ul class="dropdown-menu">
  <!-- Dropdown menu links -->
 </ul>
</div>
于 2021-04-15T20:29:55.363 に答える