web-dev-qa-db-ja.com

左揃えする方法bootstrap 3ドロップダウンメニュー？

enter image description here

上の画像では、MenuItemsはMyMenuの右側に配置され、MyMenuのMenuItemsを左に配置する必要があります（MyMenuの左端に配置する必要があることを意味します）、<ul class="dropdown-menu pull-left" role="menu">私のコードで、しかしそれは動作しません。誰もこれを行う方法を知っていますか？

ここに私のコードがあります

<!-- Static navbar -->
    <nav class="navbar navbar-inverse" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <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="#"></a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">

              <ul class="nav navbar-nav navbar-right text-uppercase">
                <li><a id="Home" href="index.html">Home</a></li>
                <!-- Visa drapdown-->
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown"> My Menu <span class="caret"></span></a>

                  <ul class="dropdown-menu pull-left" role="menu">
                    <li><a href="#">Menu Item 01</a></li>
                      <li><a href="#">Menu Item 01</a></li>
                      <li><a href="#">Menu Item 02</a></li>
                      <li><a href="#">Menu Item 03</a></li>
                      <li><a href="#">Menu Item 04</a></li>
                      <li><a href="#"></a></li>

                    </ul>

                  </li>

            </div><!--/.nav-collapse -->
          </div><!--/.container-fluid -->
        </nav>
csstwitter-bootstrapdrop-down-menutwitter-bootstrap-3
27
Selaru Sinbath

このスタイル要素をドロップダウン<ul>に追加すると、ドロップダウンがメニュー項目の左側に配置されます。

left:0;

これを参照してください Bootply.dropdown-menu.pull-leftを対象とし、left:0;を追加します。これで問題が解決するはずです。

更新

Bootstrap=には 非推奨 Bootstrap 3.1.0。使用dropdown-menu-leftビルトインを使用するクラスBootstrap cssは、追加のCSSを必要としないように、左端のドロップダウンを調整します。この更新を参照してください Bootply

19
B_s

twitterの場合Bootstrap 3

<div class="dropdown-menu pull-right">
    <!-- write your code here -->
</div>

それが役に立てば幸い ：）

41
Abhishek Goel

Bootstrap 3.1.0以降では.dropdown-menu-left または .dropdown-menu-rightドロップダウンメニューを親メニューの右側または左側に表示します。あなたの場合、次を試してください。

 <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown"> My Menu <span class="caret"></span></a>
      <ul class="dropdown-menu dropdown-menu-left" role="menu">
       <!-- write your code here -->
      </ul>
 </li>

ブートストラップは最高です

20
Shivek Parmar

Navbar-rightをnavbar-leftに変更し、プル右クラスをULに追加します。

<ul class="nav navbar-nav navbar-left text-uppercase pull-right">

例については、JSfiddleをご覧ください。

http://jsfiddle.net/eqcpLj6k/1/

6
Ryan Janvier

上記の回答は古すぎるため、Bootstrap 3.3.7。

enter image description here

.dropdown-menu divで指定されたcssを使用します。

.dropdown-left-manual {
  right: 0;
  left: auto;
  padding-left: 1px;
  padding-right: 1px;
}

説明：

  • 「right：0;」ドロップダウンボタンの終わりでメニューをインラインで終了します。
  • 「left：auto;」ブートストラップによってドロップダウンメニュークラスで指定されたleft：0をオーバーライドします。
  • パディングは、メニュー項目のホバーを修正するために使用されますは無視できます。
6
Suyash Gulati