mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 13:38:26 +01:00
Code Issues Releases Wiki Activity

Fixes #12344: Update docs to show workaround for using button element with justified button groups

Browse Source
This commit is contained in:
Mark Otto 2014-01-22 21:15:17 -06:00
parent 9c97c5a729
commit 7b24a3b99c
1 changed files with 33 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
docs/components.html
View File

@ -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>&lt;a&gt;</code> elements as the <code>&lt;button&gt;</code> doesn't pick up the styles we use to justify content (some <code>display: table-cell;</code>-fu).</p>
</div>
<h4>With <code>&lt;a&gt;</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>
@ -404,6 +401,35 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
<div class="btn-group btn-group-justified">
...
</div>
{% endhighlight %}
<h4>With <code>&lt;button&gt;</code> elements</h4>
<p>To use justified button groups with <code>&lt;button&gt;</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>&lt;button&gt;</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>