[英]Bootstrap button dropdown in btn-container with other buttons
I am create a WYSIWYG editor in my free time. 我会在业余时间创建一个所见即所得的编辑器。 I decided I wanted to use the drop down to allow myself to select formatting.
我决定我想使用下拉菜单来选择格式。 The problem is when I add a dropdown it isnt under the button but at the beginning of the the button container.
问题是,当我添加一个下拉列表时,它不是在按钮下方,而是在按钮容器的开头。
here is an image to show what I mean. 这是一张图片,显示我的意思。
The first button looks active because the text is aligned left... Sorry I tried to find a way to fix that but the dropdown is from the last button. 第一个按钮似乎处于活动状态,因为文本向左对齐...对不起,我试图找到一种解决方法,但是下拉菜单来自最后一个按钮。
My question is, is there a way to align a Twitter Bootstrap Dropdown, with the button it is supposed to be on or atleast make the dropdown with the width of the button container. 我的问题是,有没有办法使Twitter Bootstrap Dropdown与应该被打开的按钮对齐,或者至少使按钮容器的宽度与下拉菜单对齐。
Yes. 是。 You can just add a rule,
left: auto; right: 0;
您可以只添加一条规则,
left: auto; right: 0;
left: auto; right: 0;
for the <ul>
coming there, by targeting or giving a class, say .right-menu
, this way: 对于到达此处的
<ul>
,通过定位或指定类,例如.right-menu
,可以这样:
.right-menu, .dropdown-menu.right-menu {left: auto; right: 0;}
A working demo of the same would be in jsFiddle . jsFiddle中将有一个相同的工作演示。
It's not a bad thing to use .pull-right
on the .dropdown-menu
to make it stick to the right of the container. 在
.dropdown-menu
上使用.pull-right
使其.pull-right
并不是一件坏事。
As seen in the source , this class is meant to do that : 从源代码中可以看出,此类旨在实现以下目的:
// Aligns the dropdown menu to right
&.pull-right {
right: 0;
left: auto;
}
If you prefer to make it as big as the container, you can try applying this to your menu : 如果您希望使其与容器一样大,则可以尝试将其应用于菜单:
.dropdown-menu {
min-width: 100%;
}
You should keep .pull-right
in case you have bigger menus. 如果菜单更大,则应保持
.pull-right
。
Check the fiddle demo 查看小提琴演示
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.