bootstrap のボタンドロップダウンの出現位置を固定する方法

twitter bootstrap で、ボタンドロップダウンというものがあります。<button> にドロップダウンを付けて、さらにメニューとかを出すやつです。

ドロップダウンの様子

こんなの。

このメニューとかが出てくるの領域、どうも自動計算をされているようなのですが、ボタンから見て右、または左に出現位置を固定したい場合があります。そのやり方を書いておきます。

HTMLソースが以下。<ul> の中身がドロップダウンする中身なのですが、そこに、left というクラスを追加しています。

<ul class="nav">
  <li><a href="#">Nav Item</a></li>
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown">Nav Item</a>
    <ul class="dropdown-menu left">
      <li><a href="#">Item One</a></li>
      <li><a href="#">Item Two</a></li>
    </ul><!-- /.dropdown-menu.right -->
  </li><!-- /.dropdown -->
</ul><!-- /.nav -->

そして、left には、以下のように指定します。

.dropdown-menu.left {
 left:0;
 right:auto;
 &::before {right:auto !important; left:9px;}
 &::after {right:auto !important; left:10px;}
}

もし、左に固定したい場合は、left:0, right:auto をひっくり返しつつ、before, after の中身も left/right をひっくり返せばOKですね。

 

Ruby on RailsによるWEBシステム開発、Android/iPhoneアプリ開発、電子書籍配信のことならお任せください この記事を書いた人と働こう! Ruby on Rails の開発なら実績豊富なBPS

この記事の著者

榊原 寛

1980 年埼玉県生まれ。BPS COO。慶應義塾志木高校からそのまま慶應義塾大学湘南藤沢キャンパスへ。コンピュータの勉強がしたかったので、学部1年より徳田英幸研究室へ。無線ネットワークに関する研究、ユビキタスネットワークに関する研究、センサネットワークに関する研究、仮想ネットワークに関する研究等を行い、2010年慶應義塾大学政策・メディア研究科後記博士課程単位取得退学。 IPA 未踏事業 2006年度、2007年度開発責任者。日本学術振興会特別研究員(DC2) 2008年度。技術が実際に役に立つ現場に行きたく、BPSへ。BPSでは、主に電子書籍に関する事業に従事。マンガEPUBビューアや WebKit を利用した EPUB3 の日本語縦書きビューアプロジェクトを推進。全国中小企業団体中央会によるグローバル技術連携・創業支援補助金(創業枠)及び東京都中小企業振興公社「新製品・新技術助成事業 助成金」を MangaReborn 事業にて申請・獲得。電子書籍に関する次なるソリューションについて日々試行錯誤。慶應義塾大学環境情報学部非常勤講師兼任中。慶應義塾大学 SFC 研究所所員。W3C AC Representative。 http://techracho/bpsinc.jp/skk/ , http://www.ht.sfc.keio.ac.jp/~skk/

榊原 寛の書いた記事

開発
W3C/IDPF の統合に関して

2016年05月15日

週刊Railsウォッチ

インフラ

Rubyスタイルガイドを読む

BigBinary記事より

ActiveSupport探訪シリーズ