From ce292a8bb8129cd16425e3428a461891e78e3a3c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 11 Mar 2012 15:15:55 -0700 Subject: [PATCH] fix overflowing thumbnails in responsive <767px layouts --- docs/assets/bootstrap.zip | Bin 55139 -> 55196 bytes docs/assets/css/bootstrap-responsive.css | 24 ++++++++++++++--------- less/mixins.less | 15 ++++++++++++++ less/responsive.less | 9 +++++++++ 4 files changed, 39 insertions(+), 9 deletions(-) diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip index 4a66cd1bb12d59b6226131da601cf59a3f2bcf11..bae41d33c30bf65d9be75cd22eabbdd20cb9f6c5 100644 GIT binary patch delta 5034 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 delta 5055 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 diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css index f1ab51a219..03e8cf1a61 100644 --- a/docs/assets/css/bootstrap-responsive.css +++ b/docs/assets/css/bootstrap-responsive.css @@ -168,16 +168,22 @@ width: auto; margin: 0; } - input, - textarea, - select, - .uneditable-input { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; - box-sizing: border-box; - max-width: 100%; + .thumbnails [class*="span"] { + width: auto; } + /* + // FORM FIELDS + // ----------- + // Make them behave like divs + input, + textarea, + select, + .uneditable-input { + .box-sizing(border-box); + max-width: 100%; + min-height: 20px; + } + */ } @media (min-width: 768px) and (max-width: 979px) { .row { diff --git a/less/mixins.less b/less/mixins.less index e142f1a633..cafd7daf90 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -469,18 +469,33 @@ // Grid System // ----------- +// Centered container element .container-fixed() { margin-left: auto; margin-right: auto; .clearfix(); } +// Table columns .tableColumns(@columnSpan: 1) { float: none; // undo default grid column styles width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 16; // 16 is total padding on left and right of table cells margin-left: 0; // undo default grid column styles } +// Make a Grid +// Use .makeRow and .makeColumn to assign semantic layouts grid system behavior +.makeRow() { + margin-left: @gridGutterWidth * -1; + .clearfix(); +} +.makeColumn(@columns: 1) { + float: left; + margin-left: @gridGutterWidth; + width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)); +} + +// The Grid #grid { .core (@gridColumnWidth, @gridGutterWidth) { diff --git a/less/responsive.less b/less/responsive.less index 0003cd6d04..a83eb87293 100644 --- a/less/responsive.less +++ b/less/responsive.less @@ -189,6 +189,13 @@ margin: 0; } + // THUMBNAILS + // ---------- + .thumbnails [class*="span"] { + width: auto; + } + +/* // FORM FIELDS // ----------- // Make them behave like divs @@ -198,7 +205,9 @@ .uneditable-input { .box-sizing(border-box); max-width: 100%; + min-height: 20px; } +*/ }