rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

Fix up display of dropdown submenu examples on responsive views

Browse Source
This commit is contained in:
Mark Otto 2012-12-04 18:25:16 -08:00
parent e31c7fb8a5
commit 12916b06aa
3 changed files with 47 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
docs/assets/css/docs.css
View File

@ -687,6 +687,21 @@ form.bs-docs-example {
margin: 20px; margin: 20px;
} }
/* Dropdowns */
.bs-docs-example-submenus {
min-height: 180px;
}
.bs-docs-example-submenus > .pull-left + .pull-left {
margin-left: 20px;
}
.bs-docs-example-submenus .dropup > .dropdown-menu,
.bs-docs-example-submenus .dropdown > .dropdown-menu {
display: block;
position: static;
margin-bottom: 5px;
*width: 180px;
}
/* Responsive docs /* Responsive docs
@ -1013,7 +1028,26 @@ form.bs-docs-example {
word-break: break-all; word-break: break-all;
} }
/* Modal example */ /* Examples: dropdowns */
.bs-docs-example-submenus > .pull-left {
float: none;
clear: both;
}
.bs-docs-example-submenus > .pull-left,
.bs-docs-example-submenus > .pull-left + .pull-left {
margin-left: 0;
}
.bs-docs-example-submenus p {
margin-bottom: 0;
}
.bs-docs-example-submenus .dropup > .dropdown-menu,
.bs-docs-example-submenus .dropdown > .dropdown-menu {
margin-bottom: 10px;
float: none;
max-width: 180px;
}
/* Examples: modal */
.modal-example .modal { .modal-example .modal {
position: relative; position: relative;
top: auto; top: auto;

12
docs/components.html
View File

@ -165,12 +165,12 @@
<h3>Sub menus on dropdowns</h3> <h3>Sub menus on dropdowns</h3>
<p>Add an extra level of dropdown menus, appearing on hover like those of OS X, with some simple markup additions. Add <code>.dropdown-submenu</code> to any <code>li</code> in an existing dropdown menu for automatic styling.</p> <p>Add an extra level of dropdown menus, appearing on hover like those of OS X, with some simple markup additions. Add <code>.dropdown-submenu</code> to any <code>li</code> in an existing dropdown menu for automatic styling.</p>
<div class="bs-docs-example" style="min-height: 180px;"> <div class="bs-docs-example bs-docs-example-submenus">
<div class="pull-left"> <div class="pull-left">
<p class="muted">Default</p> <p class="muted">Default</p>
<div class="dropdown clearfix"> <div class="dropdown clearfix">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;"> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href="#">Action</a></li> <li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li> <li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li> <li><a tabindex="-1" href="#">Something else here</a></li>
@ -189,10 +189,10 @@
</div> </div>
</div> </div>
<div class="pull-left" style="margin-left: 20px;"> <div class="pull-left">
<p class="muted">Dropup</p> <p class="muted">Dropup</p>
<div class="dropup"> <div class="dropup">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;"> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href="#">Action</a></li> <li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li> <li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li> <li><a tabindex="-1" href="#">Something else here</a></li>
@ -211,10 +211,10 @@
</div> </div>
</div> </div>
<div class="pull-left" style="margin-left: 20px;"> <div class="pull-left">
<p class="muted">Left submenu</p> <p class="muted">Left submenu</p>
<div class="dropdown"> <div class="dropdown">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;"> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href="#">Action</a></li> <li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li> <li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li> <li><a tabindex="-1" href="#">Something else here</a></li>

12
docs/templates/pages/components.mustache vendored
View File

@ -94,12 +94,12 @@
<h3>{{_i}}Sub menus on dropdowns{{/i}}</h3> <h3>{{_i}}Sub menus on dropdowns{{/i}}</h3>
<p>{{_i}}Add an extra level of dropdown menus, appearing on hover like those of OS X, with some simple markup additions. Add <code>.dropdown-submenu</code> to any <code>li</code> in an existing dropdown menu for automatic styling.{{/i}}</p> <p>{{_i}}Add an extra level of dropdown menus, appearing on hover like those of OS X, with some simple markup additions. Add <code>.dropdown-submenu</code> to any <code>li</code> in an existing dropdown menu for automatic styling.{{/i}}</p>
<div class="bs-docs-example" style="min-height: 180px;"> <div class="bs-docs-example bs-docs-example-submenus">
<div class="pull-left"> <div class="pull-left">
<p class="muted">Default</p> <p class="muted">Default</p>
<div class="dropdown clearfix"> <div class="dropdown clearfix">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;"> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li> <li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li> <li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li> <li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
@ -118,10 +118,10 @@
</div> </div>
</div>{{! /.pull-left }} </div>{{! /.pull-left }}
<div class="pull-left" style="margin-left: 20px;"> <div class="pull-left">
<p class="muted">Dropup</p> <p class="muted">Dropup</p>
<div class="dropup"> <div class="dropup">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;"> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li> <li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li> <li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li> <li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
@ -140,10 +140,10 @@
</div> </div>
</div>{{! /.pull-left }} </div>{{! /.pull-left }}
<div class="pull-left" style="margin-left: 20px;"> <div class="pull-left">
<p class="muted">Left submenu</p> <p class="muted">Left submenu</p>
<div class="dropdown"> <div class="dropdown">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;"> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li> <li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li> <li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
<li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li> <li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>