引导程序下拉气泡右对齐（非右推）

89

我的顶层菜单中有购物车，使用push-right，我的问题是下拉菜单气泡不在页面中。我正在尝试将气泡右对齐，以使其与“点击”右对齐

像这样

在此处输入图片说明

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>

html css twitter-bootstrap

— 否
source

2

最好将它放入jsfiddle.net来向他人展示您拥有的东西。

— JofryHS 2013年

您是否尝试过right:0;下拉菜单？

— 拉胡尔2013年

189

Bootstrap 3.1+

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

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

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

Bootstrap 2.3和3.0

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

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

这似乎对我使用引导3.0工作

— 梅特里
source

20

从v3.1.0开始，您可以使用dropdown-menu-right。见github.com/twbs/bootstrap/blob/v3.1.0/less/dropdowns.less#L135

— Laurent Dezitter 2014年

19

这可以通过引导类来解决dropdown-menu-right 与dropdown-menu这是专为使用的CSS属性这个问题right: 0;，并left: auto;以正确的对齐。

此解决方案为我工作。

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

— 贾斯普雷特·辛格（Jaspreet Singh）
source

1

是的，这是正确的解决方案（Bootstrap 3.3.7）。只需确保将类添加dropdown-menu-right到ul包含菜单选项（而不是按钮）的类即可

— Miguel

6

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

这在boostrap 4.2.1中仍然有效:)

— 乔治·佩夫
source

5

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

jsfiddle

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

— 编码爱好者
source

2

好的，我知道了！

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

— 否
source