From a968d300b434598e8c1735f08fc7ad5da9d40033 Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Mon, 3 Oct 2011 22:14:50 -0700
Subject: [PATCH] overhaul the grid CSS to make it more durable for tables and
 forms to use the same sizing methods; need to see about improving this in the
 future

---
 bootstrap.css        | 110 +++++++++++++++++++++++++------------------
 bootstrap.min.css    |  76 ++++++++++++++++++------------
 lib/forms.less       |   2 -
 lib/patterns.less    |   4 +-
 lib/scaffolding.less |  28 ++++++-----
 lib/tables.less      |  28 +++++++++++
 6 files changed, 154 insertions(+), 94 deletions(-)

diff --git a/bootstrap.css b/bootstrap.css
index d5a05d9fda..a7ba4c6492 100644
--- a/bootstrap.css
+++ b/bootstrap.css
@@ -6,7 +6,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  *
  * Designed and built with all the love in the world @twitter by @mdo and @fat.
- * Date: Mon Oct  3 21:43:20 PDT 2011
+ * Date: Mon Oct  3 22:00:55 PDT 2011
  */
 /* Reset.less
  * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here	that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
@@ -264,7 +264,7 @@ a:hover {
 .row:after {
   clear: both;
 }
-[class*="span"] {
+.row > [class*="span"] {
   display: inline;
   float: left;
   margin-left: 20px;
@@ -341,40 +341,40 @@ a:hover {
 .span24 {
   width: 1420px;
 }
-.offset1 {
+.row  > .offset1 {
   margin-left: 80px;
 }
-.offset2 {
+.row  > .offset2 {
   margin-left: 140px;
 }
-.offset3 {
+.row  > .offset3 {
   margin-left: 200px;
 }
-.offset4 {
+.row  > .offset4 {
   margin-left: 260px;
 }
-.offset5 {
+.row  > .offset5 {
   margin-left: 320px;
 }
-.offset6 {
+.row  > .offset6 {
   margin-left: 380px;
 }
-.offset7 {
+.row  > .offset7 {
   margin-left: 440px;
 }
-.offset8 {
+.row  > .offset8 {
   margin-left: 500px;
 }
-.offset9 {
+.row  > .offset9 {
   margin-left: 560px;
 }
-.offset10 {
+.row  > .offset10 {
   margin-left: 620px;
 }
-.offset11 {
+.row  > .offset11 {
   margin-left: 680px;
 }
-.offset12 {
+.row  > .offset12 {
   margin-left: 740px;
 }
 .span-one-third {
@@ -788,99 +788,67 @@ textarea.xxlarge {
 }
 input.span1, textarea.span1, select.span1 {
   display: inline-block;
-  float: none;
   width: 30px;
-  margin-left: 0;
 }
 input.span2, textarea.span2, select.span2 {
   display: inline-block;
-  float: none;
   width: 90px;
-  margin-left: 0;
 }
 input.span3, textarea.span3, select.span3 {
   display: inline-block;
-  float: none;
   width: 150px;
-  margin-left: 0;
 }
 input.span4, textarea.span4, select.span4 {
   display: inline-block;
-  float: none;
   width: 210px;
-  margin-left: 0;
 }
 input.span5, textarea.span5, select.span5 {
   display: inline-block;
-  float: none;
   width: 270px;
-  margin-left: 0;
 }
 input.span6, textarea.span6, select.span6 {
   display: inline-block;
-  float: none;
   width: 330px;
-  margin-left: 0;
 }
 input.span7, textarea.span7, select.span7 {
   display: inline-block;
-  float: none;
   width: 390px;
-  margin-left: 0;
 }
 input.span8, textarea.span8, select.span8 {
   display: inline-block;
-  float: none;
   width: 450px;
-  margin-left: 0;
 }
 input.span9, textarea.span9, select.span9 {
   display: inline-block;
-  float: none;
   width: 510px;
-  margin-left: 0;
 }
 input.span10, textarea.span10, select.span10 {
   display: inline-block;
-  float: none;
   width: 570px;
-  margin-left: 0;
 }
 input.span11, textarea.span11, select.span11 {
   display: inline-block;
-  float: none;
   width: 630px;
-  margin-left: 0;
 }
 input.span12, textarea.span12, select.span12 {
   display: inline-block;
-  float: none;
   width: 690px;
-  margin-left: 0;
 }
 input.span13, textarea.span13, select.span13 {
   display: inline-block;
-  float: none;
   width: 750px;
-  margin-left: 0;
 }
 input.span14, textarea.span14, select.span14 {
   display: inline-block;
-  float: none;
   width: 810px;
-  margin-left: 0;
 }
 input.span15, textarea.span15, select.span15 {
   display: inline-block;
-  float: none;
   width: 870px;
-  margin-left: 0;
 }
 input.span16, textarea.span16, select.span16 {
   display: inline-block;
-  float: none;
   width: 930px;
-  margin-left: 0;
 }
 input[disabled],
 select[disabled],
@@ -1134,6 +1102,54 @@ table tbody tr:last-child td:last-child {
   -moz-border-radius: 0 0 4px 0;
   border-radius: 0 0 4px 0;
 }
+table .span1 {
+  width: 20px;
+}
+table .span2 {
+  width: 60px;
+}
+table .span3 {
+  width: 100px;
+}
+table .span4 {
+  width: 140px;
+}
+table .span5 {
+  width: 180px;
+}
+table .span6 {
+  width: 220px;
+}
+table .span7 {
+  width: 260px;
+}
+table .span8 {
+  width: 300px;
+}
+table .span9 {
+  width: 340px;
+}
+table .span10 {
+  width: 380px;
+}
+table .span11 {
+  width: 420px;
+}
+table .span12 {
+  width: 460px;
+}
+table .span13 {
+  width: 500px;
+}
+table .span14 {
+  width: 540px;
+}
+table .span15 {
+  width: 580px;
+}
+table .span16 {
+  width: 620px;
+}
 .zebra-striped tbody tr:nth-child(odd) td {
   background-color: #f9f9f9;
 }
@@ -2342,7 +2358,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
 .media-grid a {
   float: left;
   padding: 4px;
-  margin: 0 0 20px 20px;
+  margin: 0 0 18px 20px;
   border: 1px solid #ddd;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
diff --git a/bootstrap.min.css b/bootstrap.min.css
index 0755122ce7..e9d26649cf 100644
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -35,7 +35,7 @@ a{color:#0069d6;text-decoration:none;line-height:inherit;font-weight:inherit;}a:
 .show{display:block;}
 .row{zoom:1;margin-left:-20px;}.row:before,.row:after{display:table;content:"";zoom:1;*display:inline;}
 .row:after{clear:both;}
-[class*="span"]{display:inline;float:left;margin-left:20px;}
+.row>[class*="span"]{display:inline;float:left;margin-left:20px;}
 .span1{width:40px;}
 .span2{width:100px;}
 .span3{width:160px;}
@@ -60,18 +60,18 @@ a{color:#0069d6;text-decoration:none;line-height:inherit;font-weight:inherit;}a:
 .span22{width:1300px;}
 .span23{width:1360px;}
 .span24{width:1420px;}
-.offset1{margin-left:80px;}
-.offset2{margin-left:140px;}
-.offset3{margin-left:200px;}
-.offset4{margin-left:260px;}
-.offset5{margin-left:320px;}
-.offset6{margin-left:380px;}
-.offset7{margin-left:440px;}
-.offset8{margin-left:500px;}
-.offset9{margin-left:560px;}
-.offset10{margin-left:620px;}
-.offset11{margin-left:680px;}
-.offset12{margin-left:740px;}
+.row >.offset1{margin-left:80px;}
+.row >.offset2{margin-left:140px;}
+.row >.offset3{margin-left:200px;}
+.row >.offset4{margin-left:260px;}
+.row >.offset5{margin-left:320px;}
+.row >.offset6{margin-left:380px;}
+.row >.offset7{margin-left:440px;}
+.row >.offset8{margin-left:500px;}
+.row >.offset9{margin-left:560px;}
+.row >.offset10{margin-left:620px;}
+.row >.offset11{margin-left:680px;}
+.row >.offset12{margin-left:740px;}
 .span-one-third{width:300px;}
 .span-two-thirds{width:620px;}
 .offset-one-third{margin-left:340px;}
@@ -135,22 +135,22 @@ form .clearfix.error .input-prepend span.add-on,form .clearfix.error .input-appe
 .input-xlarge,input.xlarge,textarea.xlarge,select.xlarge{width:270px;}
 .input-xxlarge,input.xxlarge,textarea.xxlarge,select.xxlarge{width:530px;}
 textarea.xxlarge{overflow-y:auto;}
-input.span1,textarea.span1,select.span1{display:inline-block;float:none;width:30px;margin-left:0;}
-input.span2,textarea.span2,select.span2{display:inline-block;float:none;width:90px;margin-left:0;}
-input.span3,textarea.span3,select.span3{display:inline-block;float:none;width:150px;margin-left:0;}
-input.span4,textarea.span4,select.span4{display:inline-block;float:none;width:210px;margin-left:0;}
-input.span5,textarea.span5,select.span5{display:inline-block;float:none;width:270px;margin-left:0;}
-input.span6,textarea.span6,select.span6{display:inline-block;float:none;width:330px;margin-left:0;}
-input.span7,textarea.span7,select.span7{display:inline-block;float:none;width:390px;margin-left:0;}
-input.span8,textarea.span8,select.span8{display:inline-block;float:none;width:450px;margin-left:0;}
-input.span9,textarea.span9,select.span9{display:inline-block;float:none;width:510px;margin-left:0;}
-input.span10,textarea.span10,select.span10{display:inline-block;float:none;width:570px;margin-left:0;}
-input.span11,textarea.span11,select.span11{display:inline-block;float:none;width:630px;margin-left:0;}
-input.span12,textarea.span12,select.span12{display:inline-block;float:none;width:690px;margin-left:0;}
-input.span13,textarea.span13,select.span13{display:inline-block;float:none;width:750px;margin-left:0;}
-input.span14,textarea.span14,select.span14{display:inline-block;float:none;width:810px;margin-left:0;}
-input.span15,textarea.span15,select.span15{display:inline-block;float:none;width:870px;margin-left:0;}
-input.span16,textarea.span16,select.span16{display:inline-block;float:none;width:930px;margin-left:0;}
+input.span1,textarea.span1,select.span1{display:inline-block;width:30px;}
+input.span2,textarea.span2,select.span2{display:inline-block;width:90px;}
+input.span3,textarea.span3,select.span3{display:inline-block;width:150px;}
+input.span4,textarea.span4,select.span4{display:inline-block;width:210px;}
+input.span5,textarea.span5,select.span5{display:inline-block;width:270px;}
+input.span6,textarea.span6,select.span6{display:inline-block;width:330px;}
+input.span7,textarea.span7,select.span7{display:inline-block;width:390px;}
+input.span8,textarea.span8,select.span8{display:inline-block;width:450px;}
+input.span9,textarea.span9,select.span9{display:inline-block;width:510px;}
+input.span10,textarea.span10,select.span10{display:inline-block;width:570px;}
+input.span11,textarea.span11,select.span11{display:inline-block;width:630px;}
+input.span12,textarea.span12,select.span12{display:inline-block;width:690px;}
+input.span13,textarea.span13,select.span13{display:inline-block;width:750px;}
+input.span14,textarea.span14,select.span14{display:inline-block;width:810px;}
+input.span15,textarea.span15,select.span15{display:inline-block;width:870px;}
+input.span16,textarea.span16,select.span16{display:inline-block;width:930px;}
 input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{background-color:#f5f5f5;border-color:#ddd;cursor:not-allowed;}
 .actions{background:#f5f5f5;margin-top:18px;margin-bottom:18px;padding:17px 20px 18px 150px;border-top:1px solid #ddd;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;}.actions .secondary-action{float:right;}.actions .secondary-action a{line-height:30px;}.actions .secondary-action a:hover{text-decoration:underline;}
 .help-inline,.help-block{font-size:11px;line-height:18px;color:#bfbfbf;}
@@ -189,6 +189,22 @@ table tbody tr:first-child td:first-child{-webkit-border-radius:4px 0 0 0;-moz-b
 table tbody tr:first-child td:last-child{-webkit-border-radius:0 4px 0 0;-moz-border-radius:0 4px 0 0;border-radius:0 4px 0 0;}
 table tbody tr:last-child td:first-child{-webkit-border-radius:0 0 0 4px;-moz-border-radius:0 0 0 4px;border-radius:0 0 0 4px;}
 table tbody tr:last-child td:last-child{-webkit-border-radius:0 0 4px 0;-moz-border-radius:0 0 4px 0;border-radius:0 0 4px 0;}
+table .span1{width:20px;}
+table .span2{width:60px;}
+table .span3{width:100px;}
+table .span4{width:140px;}
+table .span5{width:180px;}
+table .span6{width:220px;}
+table .span7{width:260px;}
+table .span8{width:300px;}
+table .span9{width:340px;}
+table .span10{width:380px;}
+table .span11{width:420px;}
+table .span12{width:460px;}
+table .span13{width:500px;}
+table .span14{width:540px;}
+table .span15{width:580px;}
+table .span16{width:620px;}
 .zebra-striped tbody tr:nth-child(odd) td{background-color:#f9f9f9;}
 .zebra-striped tbody tr:hover td{background-color:#f5f5f5;}
 table .header{cursor:pointer;}table .header:after{content:"";float:right;margin-top:7px;border-width:0 4px 4px;border-style:solid;border-color:#000 transparent;visibility:hidden;}
@@ -326,5 +342,5 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
 .media-grid{margin-left:-20px;margin-bottom:0;zoom:1;}.media-grid:before,.media-grid:after{display:table;content:"";zoom:1;*display:inline;}
 .media-grid:after{clear:both;}
 .media-grid li{display:inline;}
-.media-grid a{float:left;padding:4px;margin:0 0 20px 20px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);}.media-grid a img{display:block;}
+.media-grid a{float:left;padding:4px;margin:0 0 18px 20px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);}.media-grid a img{display:block;}
 .media-grid a:hover{border-color:#0069d6;-webkit-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);-moz-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);}
diff --git a/lib/forms.less b/lib/forms.less
index 77e1ce24b6..85e6e361e8 100644
--- a/lib/forms.less
+++ b/lib/forms.less
@@ -235,9 +235,7 @@ textarea.xxlarge {
 // This is a duplication of the main grid .columns() mixin, but subtracts 10px to account for input padding and border
 .formColumns(@columnSpan: 1) {
   display: inline-block;
-  float: none;
   width: ((@gridColumnWidth - 10) * @columnSpan) + ((@gridColumnWidth - 10) * (@columnSpan - 1));
-  margin-left: 0;
 }
 input,
 textarea,
diff --git a/lib/patterns.less b/lib/patterns.less
index ce387614e9..c4469e5392 100644
--- a/lib/patterns.less
+++ b/lib/patterns.less
@@ -981,7 +981,7 @@ input[type=submit].btn {
 // -----------
 
 .media-grid {
-  margin-left: -20px;
+  margin-left: -@gridGutterWidth;
   margin-bottom: 0;
   .clearfix();
   li {
@@ -990,7 +990,7 @@ input[type=submit].btn {
   a {
     float: left;
     padding: 4px;
-    margin: 0 0 20px 20px;
+    margin: 0 0 @baseline @gridGutterWidth;
     border: 1px solid #ddd;
     .border-radius(4px);
     .box-shadow(0 1px 1px rgba(0,0,0,.075));
diff --git a/lib/scaffolding.less b/lib/scaffolding.less
index 26bb0cc059..4f8634710f 100644
--- a/lib/scaffolding.less
+++ b/lib/scaffolding.less
@@ -82,7 +82,7 @@ a {
 
 // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7)
 // Credit to @dhg for the idea
-[class*="span"] {
+.row > [class*="span"] {
   .gridColumn();
 }
 
@@ -115,18 +115,20 @@ a {
 .span24    { .columns(24); }
 
 // Offset column options
-.offset1   { .offset(1); }
-.offset2   { .offset(2); }
-.offset3   { .offset(3); }
-.offset4   { .offset(4); }
-.offset5   { .offset(5); }
-.offset6   { .offset(6); }
-.offset7   { .offset(7); }
-.offset8   { .offset(8); }
-.offset9   { .offset(9); }
-.offset10  { .offset(10); }
-.offset11  { .offset(11); }
-.offset12  { .offset(12); }
+.row {
+  & > .offset1   { .offset(1); }
+  & > .offset2   { .offset(2); }
+  & > .offset3   { .offset(3); }
+  & > .offset4   { .offset(4); }
+  & > .offset5   { .offset(5); }
+  & > .offset6   { .offset(6); }
+  & > .offset7   { .offset(7); }
+  & > .offset8   { .offset(8); }
+  & > .offset9   { .offset(9); }
+  & > .offset10  { .offset(10); }
+  & > .offset11  { .offset(11); }
+  & > .offset12  { .offset(12); }
+}
 
 // Unique column sizes for 16-column grid
 .span-one-third     { width: 300px; }
diff --git a/lib/tables.less b/lib/tables.less
index dcc72d3ea7..949072001d 100644
--- a/lib/tables.less
+++ b/lib/tables.less
@@ -52,6 +52,34 @@ table {
 }
 
 
+// TABLE CELL SIZES
+// ----------------
+
+// This is a duplication of the main grid .columns() mixin, but subtracts 20px to account for input padding and border
+.tableColumns(@columnSpan: 1) {
+  width: ((@gridColumnWidth - 20) * @columnSpan) + ((@gridColumnWidth - 20) * (@columnSpan - 1));
+}
+table {
+  // Default columns
+  .span1     { .tableColumns(1); }
+  .span2     { .tableColumns(2); }
+  .span3     { .tableColumns(3); }
+  .span4     { .tableColumns(4); }
+  .span5     { .tableColumns(5); }
+  .span6     { .tableColumns(6); }
+  .span7     { .tableColumns(7); }
+  .span8     { .tableColumns(8); }
+  .span9     { .tableColumns(9); }
+  .span10    { .tableColumns(10); }
+  .span11    { .tableColumns(11); }
+  .span12    { .tableColumns(12); }
+  .span13    { .tableColumns(13); }
+  .span14    { .tableColumns(14); }
+  .span15    { .tableColumns(15); }
+  .span16    { .tableColumns(16); }
+}
+
+
 // ZEBRA-STRIPING
 // --------------