diff options
| author | Mark Otto <[email protected]> | 2014-01-22 21:15:17 -0600 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2014-01-22 21:15:17 -0600 |
| commit | 7b24a3b99c74d9bcace9fcb18aee81356d484fcc (patch) | |
| tree | c4e1c5ca11e258f57a439b8ba86498b4aae364a1 /docs | |
| parent | 9c97c5a729aff3f603e435f8c111866de830dcbe (diff) | |
| download | bootstrap-7b24a3b99c74d9bcace9fcb18aee81356d484fcc.tar.xz bootstrap-7b24a3b99c74d9bcace9fcb18aee81356d484fcc.zip | |
Fixes #12344: Update docs to show workaround for using button element with justified button groups
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/components.html | 40 |
1 files changed, 33 insertions, 7 deletions
diff --git a/docs/components.html b/docs/components.html index 510abcc66..aab22cfd8 100644 --- a/docs/components.html +++ b/docs/components.html @@ -363,19 +363,16 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns, </div> {% endhighlight %} - <h3 id="btn-groups-justified">Justified link variation</h3> - <p>Make a group of buttons stretch at the same size to span the entire width of its parent. Also works with button dropdowns within the button group.</p> + <h3 id="btn-groups-justified">Justified button groups</h3> + <p>Make a group of buttons stretch at equal sizes to span the entire width of its parent. Also works with button dropdowns within the button group.</p> <div class="bs-callout bs-callout-warning"> <h4>Handling borders</h4> <p>Due to the specific HTML and CSS used to justify buttons (namely <code>display: table-cell</code>), the borders between them are doubled. In regular button groups, <code>margin-left: -1px</code> is used to stack the borders instead of removing them. However, <code>margin</code> doesn't work with <code>display: table-cell</code>. As a result, depending on your customizations to Bootstrap, you may wish to remove or re-color the borders.</p> </div> - <div class="bs-callout bs-callout-warning"> - <h4>Element-specific usage</h4> - <p>This only works with <code><a></code> elements as the <code><button></code> doesn't pick up the styles we use to justify content (some <code>display: table-cell;</code>-fu).</p> - </div> - + <h4>With <code><a></code> elements</h4> + <p>Just wrap a series of <code>.btn</code>s in <code>.btn-group.btn-group-justified</code>.</p> <div class="bs-example"> <div class="btn-group btn-group-justified"> <a class="btn btn-default" role="button">Left</a> @@ -405,6 +402,35 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns, ... </div> {% endhighlight %} + + <h4>With <code><button></code> elements</h4> + <p>To use justified button groups with <code><button></code> elements, <strong class="text-danger">you must wrap each button in a button group</strong>. Most browsers don't properly apply our CSS for justification to <code><button></code> elements, but since we support button dropdowns, we can workaround that.</p> + <div class="bs-example"> + <div class="btn-group btn-group-justified"> + <div class="btn-group"> + <button type="button" class="btn btn-default">Left</button> + </div> + <div class="btn-group"> + <button type="button" class="btn btn-default">Middle</button> + </div> + <div class="btn-group"> + <button type="button" class="btn btn-default">Right</button> + </div> + </div> + </div> +{% highlight html %} +<div class="btn-group btn-group-justified"> + <div class="btn-group"> + <button type="button" class="btn btn-default">Left</button> + </div> + <div class="btn-group"> + <button type="button" class="btn btn-default">Middle</button> + </div> + <div class="btn-group"> + <button type="button" class="btn btn-default">Right</button> + </div> +</div> +{% endhighlight %} </div> |