rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00
Code Issues Actions Packages Releases Activity

Docs: Add example of .dropdown-menu-right

Browse Source 
Fixes #18493
Closes #18836
[skip sauce]
This commit is contained in:
Jeremy Kratz 2016-01-10 18:02:33 -06:00 committed by Chris Rebert
parent 88aa1082c8
commit dd47423ae6
1 changed files with 11 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
docs/components/dropdowns.md
View File

@ -45,8 +45,6 @@ You can optionally use `<button>` elements in your dropdowns instead of `<a>`s.
</div> </div>
{% endexample %} {% endexample %}
## Alignment ## Alignment
By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add `.dropdown-menu-right` to a `.dropdown-menu` to right align the dropdown menu. By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add `.dropdown-menu-right` to a `.dropdown-menu` to right align the dropdown menu.
@ -55,11 +53,18 @@ By default, a dropdown menu is automatically positioned 100% from the top and al
**Heads up!** Dropdowns are positioned only with CSS and may need some additional styles for exact alignment. **Heads up!** Dropdowns are positioned only with CSS and may need some additional styles for exact alignment.
{% endcallout %} {% endcallout %}
{% highlight html %} {% example html %}
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel"> <div class="btn-group">
... <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
This dropdown's menu is right-aligned
</button>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div> </div>
{% endhighlight %} {% endexample %}
## Menu headers ## Menu headers