Html bootstrap 下拉气泡右对齐(不是右推)

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/18892351/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 13:34:33  来源:igfitidea点击:

bootstrap dropdown bubble align right (not push-right)

htmlcsstwitter-bootstrap

提问by no0ne

I have cart in my top menu, using push-rightand 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'

我的顶部菜单中有购物车,使用时push-right我的问题是下拉气泡从页面中掉出来。我正在尝试将气泡对齐,以便它与“单击”右对齐

like this

像这样

enter image description here

在此处输入图片说明

HTML:

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>

回答by meetri

Bootstrap 3.1+

引导程序 3.1+

Adding the class .dropdown-menu-right to the same div containing the class dropdown-menu:

将类 .dropdown-menu-right 添加到包含类下拉菜单的同一个 div:

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

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

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

Bootstrap 2.3 & 3.0

引导程序 2.3 和 3.0

Add the class .pull-right to the same div containing the class dropdown-menu

将类 .pull-right 添加到包含类下拉菜单的同一个 div

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

This seems to work for me using bootstrap 3.0

这似乎对我使用 bootstrap 3.0 有用

回答by Jaspreet Singh

This can be solved with the bootstrap class dropdown-menu-rightwith dropdown-menuthat is specifically for this problem that uses the css properties right: 0;and left: auto;to right align it.

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

This solution is working for me.

这个解决方案对我有用。

Source - http://getbootstrap.com/components/#btn-dropdowns-dropup(go to developer tools for this)

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

回答by Georgi Peev

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

This is still working in boostrap 4.2.1 :)

这仍然适用于 boostrap 4.2.1 :)

回答by Coding Enthusiast

in bootstrap v 3.1.0the answer to this question is different.

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

jsfiddle

提琴手

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

回答by no0ne

ok got it!

好的,我知道了!

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

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