2
0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-05-30 15:24:08 +03:00

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:
Mark Otto
2012-06-25 15:46:46 -07:00
parent 78849cf52e
commit 8c2db7d7d6
3 changed files with 53 additions and 14 deletions
+13 -2
View File
@@ -5,7 +5,8 @@
// Make the div behave like a button
.btn-group {
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();
}
@@ -27,10 +28,20 @@
// Float them, remove border radius, then re-add to first and last elements
.btn-group > .btn {
position: relative;
float: left;
margin-left: -1px;
font-size: @baseFontSize; // redeclare as part 2 of font-size inline-block hack
.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
.btn-group > .btn:first-child {
margin-left: 0;