94

I have cart in my top menu, using push-right and my problem is that the dropdown bubble falls out of the page. I am trying to align the bubble right, so that it right-aligns with 'click'

like this

enter image description here

HTML:

<div class="cart pull-right">
  <ul class="nav">
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">CLICK</a>
       <div class="dropdown-menu">
       STUFF
       </div>
    </li>
  </ul>
</div>
4

5 回答 5

197

引导 3.1+

将类 .dropdown-menu-right 添加到包含类 dropdown-menu 的同一 div 中：

<div class="dropdown-menu dropdown-menu-right">
    STUFF
</div>

http://getbootstrap.com/components/#dropdowns-alignment

引导 2.3 和 3.0

将类 .pull-right 添加到包含类 dropdown-menu 的同一 div

<div class="dropdown-menu pull-right">
    STUFF
</div>

这似乎对我使用 bootstrap 3.0 有用

于 2013-11-28T09:22:07.340 回答
20

这可以通过引导类来解决，该类dropdown-menu-right 专门dropdown-menu针对使用 css 属性right: 0;并left: auto;右对齐的问题。

这个解决方案对我有用。

来源 - http://getbootstrap.com/components/#btn-dropdowns-dropup（为此转到开发人员工具）

于 2015-08-02T10:52:58.937 回答
8 
<div class="dropdown-menu dropdown-menu-right">

这仍然适用于 boostrap 4.2.1 :)

于 2019-01-01T20:52:06.963 回答
6

这个问题的bootstrap v 3.1.0答案是不同的。

jsfiddle

<div class="dropdown-menu pull-menu-right">
       STUFF
</div>
于 2015-07-16T15:24:19.963 回答
3

好的，我知道了！

position:relative;left:0上<ul class="dropdown-menu">

于 2013-09-19T12:27:34.970 回答