Html 更改引导程序下拉以向右水平放置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16409266/
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
change bootstrap drop down to drop horizontal right
提问by Quantico
I have a drop down menu that opens a row of icons underneath it (see picture 1, names and pictures were removed to maintain privacy)
我有一个下拉菜单，在它下面打开一行图标（见图1，为了保护隐私，名字和图片被删除了）
I am trying to make this menu to open to the right of choose child, and not underneath it (see picture 2, of what I am trying to get. the Images will open to the right of the drop down and not under it)
我试图让这个菜单在选择孩子的右边打开，而不是在它下面（见图 2，我想要得到的东西。图像将在下拉菜单的右侧打开，而不是在它下面）
My current code is:
我目前的代码是：
<div class="span4">
<div class="btn-group">
<a class="btn btn-link dropdown-toggle" data-toggle="dropdown" href="#">
<h3>Choose Child</h3>
<img id="mainIcons" src="boyStudent.png" alt="boyStudent">
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<div class="btn-group">
<a href="parent_homepage_2.html" style="text-align:center;" class="btn btn-link operationsButtons">
<h5>A</h5>
<img id="mainIcons" src="boyStudent.png" alt="boyStudent"></a>
<a href="parent_homepage_2.html" style="text-align:center;" class="btn btn-link operationsButtons">
<h5>J</h5>
<img id="mainIcons" src="girlStudent.png" alt="girlStudent"></a>
</div>
</li>
</ul>
I tried to use the following example, that helps push the drop down to the left how to make twitter bootstrap submenu to open on the left side?but I could not figure out a way to use this to what I am looking to do
我尝试使用以下示例，这有助于将下拉菜单向左推 如何使 twitter bootstrap 子菜单在左侧打开？但我想不出一种方法来使用它来做我想做的事
Thanks
谢谢
回答by PSL
How does this look:-
这看起来如何：-
Demo
演示
Demo2Submenu dropping down.
Demo2 子菜单下拉。
<div class="span4">
<div class="btn-group"> <a class="btn btn-link dropdown-toggle" data-toggle="dropdown" href="#">
<h3>Choose Child</h3>
<img id="mainIcons" src="boyStudent.png" alt="boyStudent">
<span class="right-caret right"></span>
</a>
<ul class="dropdown-menu rightMenu">
<li>
<div class="btn-group"> <a href="parent_homepage_2.html" style="text-align:center;" class="btn btn-link operationsButtons">
<h5>A</h5>
<img id="mainIcons" src="boyStudent.png" alt="boyStudent"></a>
<a href="parent_homepage_2.html" style="text-align:center;" class="btn btn-link operationsButtons">
<h5>J</h5>
<img id="mainIcons" src="girlStudent.png" alt="girlStudent"></a>
</div>
</li>
</ul>
</div>
css
css
.rightMenu {
position:relative;
float:right;
}
.right-caret {
border-bottom: 4px solid transparent;
border-top: 4px solid transparent;
border-left: 4px solid #000000;
display: inline-block;
height: 0;
opacity: 1;
vertical-align: top;
width: 0;
}
.right
{
float:right;
}
回答by Andres Felipe
I just add this class to the dropdown-menu:
我只是将这个类添加到dropdown-menu：
.rightMenu {
position:absolute;
float:right;
top: 0;
left: 160px;
}
And it aligns perfectly.
它完美地对齐。
回答by Diego Cardenas
Just add the class "pull-right" into the <ul class="dropdown-menu">this way...
只需将类“右拉”添加到<ul class="dropdown-menu">这种方式中......
<li class="dropdown">
<a class="dropdown-toggle" href="#">Link</a>
<ul class="dropdown-menu pull-right">
<li>...</li>
</ul>
</li>
回答by btaens
To those who may find this page in the future, the now official way of doing this is with adding the .dropdown-menu-rightclass to your dropdown list.
对于将来可能会找到此页面的人，现在官方的做法是将该.dropdown-menu-right类添加到您的下拉列表中。
