diff options
| author | Jeremy Kratz <[email protected]> | 2016-01-10 18:02:33 -0600 |
|---|---|---|
| committer | Chris Rebert <[email protected]> | 2016-02-18 18:51:25 -0800 |
| commit | dd47423ae6f9717b3d678b40e1ce8a8706301598 (patch) | |
| tree | 38e036bc6a5937a4a2f1bb8c3816f76431c79dee /docs | |
| parent | 88aa1082c8fcb306b8cfe4dabeafc620c5b02e69 (diff) | |
| download | bootstrap-dd47423ae6f9717b3d678b40e1ce8a8706301598.tar.xz bootstrap-dd47423ae6f9717b3d678b40e1ce8a8706301598.zip | |
Docs: Add example of .dropdown-menu-right
Fixes #18493
Closes #18836
[skip sauce]
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/components/dropdowns.md | 17 |
1 files changed, 11 insertions, 6 deletions
diff --git a/docs/components/dropdowns.md b/docs/components/dropdowns.md index 5e153d596..09d518a60 100644 --- a/docs/components/dropdowns.md +++ b/docs/components/dropdowns.md @@ -45,8 +45,6 @@ You can optionally use `<button>` elements in your dropdowns instead of `<a>`s. </div> {% endexample %} - - ## 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. @@ -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. {% endcallout %} -{% highlight html %} -<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel"> - ... +{% example html %} +<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> -{% endhighlight %} +{% endexample %} ## Menu headers |