diff options
| author | Mark Otto <[email protected]> | 2016-04-08 20:55:19 -0500 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2016-04-08 20:55:19 -0500 |
| commit | 80144d74d7435746f786e8eceae3a4adc07f93ac (patch) | |
| tree | a6f1c8654961d2bd9c3ea2fa8639942826b9e489 /docs/components/dropdowns.md | |
| parent | 325c1d4c3cde965229c6f512739946f8076fc225 (diff) | |
| parent | 2cc75671e143587ace7efaf79c5b3350a711d57d (diff) | |
| download | bootstrap-80144d74d7435746f786e8eceae3a4adc07f93ac.tar.xz bootstrap-80144d74d7435746f786e8eceae3a4adc07f93ac.zip | |
Merge branch 'v4-dev' into v4-forms-cleanup
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 |