prevent button group buttons from wrapping in tight spaces by removing floats and replacing with font-size: 0; inline-block hack
This commit is contained in:
parent
78849cf52e
commit
8c2db7d7d6
|
@ -3104,17 +3104,8 @@ input[type="submit"].btn.btn-mini {
|
||||||
.btn-group {
|
.btn-group {
|
||||||
position: relative;
|
position: relative;
|
||||||
*margin-left: .3em;
|
*margin-left: .3em;
|
||||||
*zoom: 1;
|
font-size: 0;
|
||||||
}
|
white-space: nowrap;
|
||||||
|
|
||||||
.btn-group:before,
|
|
||||||
.btn-group:after {
|
|
||||||
display: table;
|
|
||||||
content: "";
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-group:after {
|
|
||||||
clear: both;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-group:first-child {
|
.btn-group:first-child {
|
||||||
|
@ -3140,13 +3131,22 @@ input[type="submit"].btn.btn-mini {
|
||||||
|
|
||||||
.btn-group > .btn {
|
.btn-group > .btn {
|
||||||
position: relative;
|
position: relative;
|
||||||
float: left;
|
|
||||||
margin-left: -1px;
|
margin-left: -1px;
|
||||||
|
font-size: 13px;
|
||||||
-webkit-border-radius: 0;
|
-webkit-border-radius: 0;
|
||||||
-moz-border-radius: 0;
|
-moz-border-radius: 0;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.btn-group > .btn-mini,
|
||||||
|
.btn-group > .btn-small {
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-group > .btn-large {
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
.btn-group > .btn:first-child {
|
.btn-group > .btn:first-child {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
-webkit-border-bottom-left-radius: 4px;
|
-webkit-border-bottom-left-radius: 4px;
|
||||||
|
|
|
@ -5,7 +5,8 @@
|
||||||
// Make the div behave like a button
|
// Make the div behave like a button
|
||||||
.btn-group {
|
.btn-group {
|
||||||
position: relative;
|
position: relative;
|
||||||
.clearfix(); // clears the floated buttons
|
font-size: 0; // remove as part 1 of font-size inline-block hack
|
||||||
|
white-space: nowrap; // prevent buttons from wrapping when in tight spaces (e.g., the table on the tests page)
|
||||||
.ie7-restore-left-whitespace();
|
.ie7-restore-left-whitespace();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -27,10 +28,20 @@
|
||||||
// Float them, remove border radius, then re-add to first and last elements
|
// Float them, remove border radius, then re-add to first and last elements
|
||||||
.btn-group > .btn {
|
.btn-group > .btn {
|
||||||
position: relative;
|
position: relative;
|
||||||
float: left;
|
|
||||||
margin-left: -1px;
|
margin-left: -1px;
|
||||||
|
font-size: @baseFontSize; // redeclare as part 2 of font-size inline-block hack
|
||||||
.border-radius(0);
|
.border-radius(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Reset fonts for other sizes
|
||||||
|
.btn-group > .btn-mini,
|
||||||
|
.btn-group > .btn-small {
|
||||||
|
font-size: @baseFontSize - 2px;
|
||||||
|
}
|
||||||
|
.btn-group > .btn-large {
|
||||||
|
font-size: @baseFontSize + 2px;
|
||||||
|
}
|
||||||
|
|
||||||
// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
|
// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
|
||||||
.btn-group > .btn:first-child {
|
.btn-group > .btn:first-child {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
|
|
|
@ -953,6 +953,34 @@
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Button groups
|
||||||
|
================================================== -->
|
||||||
|
|
||||||
|
<div class="page-header">
|
||||||
|
<h1>Button groups</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<table class="table table-bordered">
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<div class="btn-group">
|
||||||
|
<button class="btn">1</button>
|
||||||
|
<button class="btn">2</button>
|
||||||
|
<button class="btn">3</button>
|
||||||
|
<button class="btn">4</button>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue