diff options
| author | Mark Otto <[email protected]> | 2016-05-11 11:07:06 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2016-05-11 11:07:06 -0700 |
| commit | b280e36b788e4b42bbb359f0a13db410adf7dd8c (patch) | |
| tree | bc8115b9b11cb78767655917a482c25c9f711526 /docs/components/dropdowns.md | |
| parent | ef50b7839cb2ca9171eec12c2bf22fc38ad9d7ae (diff) | |
| parent | 9d6b41c1276af04d5e81043059035660add82b8d (diff) | |
| download | bootstrap-b280e36b788e4b42bbb359f0a13db410adf7dd8c.tar.xz bootstrap-b280e36b788e4b42bbb359f0a13db410adf7dd8c.zip | |
Merge branch 'v4-dev' into v4-split-buttons
Diffstat (limited to 'docs/components/dropdowns.md')
| -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 |