CSS 如何左对齐引导程序 3 下拉菜单？

How to left align bootstrap 3 dropdown menu?

提问by Selaru Sinbath

In the above image MenuItems are align to right side of the MyMenu, I needed to left align the MenuItems of MyMenu (I mean it must aligned to left edge of MyMenu), I try to use pull-left and pull-right class like <ul class="dropdown-menu pull-left" role="menu">with my code, but it doesn't work. anyone has an idea how to do this ?

在上图中的MenuItems是对齐到MyMenu菜单的右侧，我需要左对齐的MyMenu的的MenuItems（我的意思是必须对齐的MyMenu的左边缘），我尝试用拉左，像拉正确的类<ul class="dropdown-menu pull-left" role="menu">与我的代码，但它不起作用。任何人都知道如何做到这一点？

Here is my code

这是我的代码

<!-- 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>

采纳答案by B_s

Adding this style element to the dropdown <ul>will align the dropdown to the left side of the menu item:

将此样式元素添加到下拉列表<ul>会将下拉列表与菜单项的左侧对齐：

left:0;

See this Bootplywhich targets the .dropdown-menu.pull-leftand adds a left:0;. This should solve your problem.

请参阅此Bootply，它针对.dropdown-menu.pull-left并添加了left:0;. 这应该可以解决您的问题。

---

---

Update

更新

I see that Bootstrap has deprecatedpull-right and pull-left as of Bootstrap 3.1.0. Use dropdown-menu-leftclass to use built-in Bootstrap css to align the dropdown on the left edge so you don't need extra CSS. See this updated Bootply

我看到 Bootstrap从 Bootstrap 3.1.0开始弃用了pull-right 和 pull-left。使用dropdown-menu-leftclass 使用内置的 Bootstrap css 对齐左边缘的下拉列表，这样您就不需要额外的 CSS。看到这个更新的Bootply

回答by Abhishek Goel

for Twitter Bootstrap 3

用于 Twitter Bootstrap 3

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

hope it helps :)

希望能帮助到你 ：）

回答by Shivek Parmar

For Bootstrap 3.1.0 or above use .dropdown-menu-leftor .dropdown-menu-rightto display the drop down menus right or left side of the parent menu. In your case try following.

对于 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>

Bootstrap is BEST

Bootstrap 是最好的

回答by Suyash Gulati

As the answers given above are too old, would like to provide working solution for Bootstrap 3.3.7.

由于上面给出的答案太旧，想为 Bootstrap 3.3.7 提供工作解决方案。

Use the given css on your .dropdown-menu div :

在 .dropdown-menu div 上使用给定的 css：

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

Explaination :

说明：

• "right:0;" to make then ending of menu inline with end of dropdown button.
• "left:auto;" to override the left:0 given in dropdown-menu class by bootstrap.
• paddings are used to correct hovers on menu item, can be ignored.

• “右：0；” 使菜单的结尾与下拉按钮的结尾内联。
• “左：自动；” 通过引导程序覆盖下拉菜单类中给出的 left:0。
• paddings 用于更正菜单项上的悬停，可以忽略。

回答by Ryan Janvier

Change navbar-right to navbar-left and add a pull-right class to the UL.

将 navbar-right 更改为 navbar-left 并向 UL 添加一个 pull-right 类。

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

Check out the JSfiddle for an example.

以 JSfiddle 为例。

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

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

回答by Marcello

For Bootstrap 4:

对于引导程序 4：

There are CSS classes named: .dropup, .droprightand .dropleft.

有名为的 CSS 类：.dropup,.dropright和.dropleft.

<div class="btn-group dropleft">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropleft
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

Source: Bootstrap

资料来源：Bootstrap