mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-05 16:42:29 +03:00
Code Activity

move collapsing navbar nav to 480 and below, unfloat nav for 768 and below to wrap links with position absolute

Browse Source
This commit is contained in:
Mark Otto
2012-01-08 03:00:06 -08:00
parent 9e7acc6370
commit b7acbd8476
3 changed files with 126 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/responsive.less
+71 -61
View File
@@ -18,67 +18,6 @@
// ---------------------
@media (max-width: 480px) {
// Resize modals
.modal {
width: auto;
margin: 0;
&.fade.in { top: auto; }
}
// Remove the horizontal form styles
.horizontal-form .control-group > label {
float: none;
width: auto;
padding-top: 0;
text-align: left;
}
// Move over all input controls and content
.horizontal-form .controls {
margin-left: 0;
}
// Move the options list down to align with labels
.horizontal-form .control-list {
padding-top: 0; // has to be padding because margin collaspes
}
// Move over buttons in .form-actions to align with .controls
.horizontal-form .form-actions {
padding-left: 0;
}
// Modals
.modal {
position: fixed;
top: 20px;
left: 20px;
right: 20px;
width: auto;
.close {
padding: 10px;
}
}
}
// LANDSCAPE PHONE TO SMALL DESKTOP & PORTRAIT TABLET
// --------------------------------------------------
@media (max-width: 768px) {
// Remove width from containers
.container {
width: auto;
padding: 0 20px;
}
// Undo negative margin on rows
.row {
margin-left: 0;
}
// Make all columns even
.row > [class*="span"] {
float: none;
display: block;
width: auto;
margin: 0;
}
// Make the nav work for small devices
.navbar {
@@ -137,6 +76,77 @@
}
}
// Resize modals
.modal {
width: auto;
margin: 0;
&.fade.in { top: auto; }
}
// Remove the horizontal form styles
.horizontal-form .control-group > label {
float: none;
width: auto;
padding-top: 0;
text-align: left;
}
// Move over all input controls and content
.horizontal-form .controls {
margin-left: 0;
}
// Move the options list down to align with labels
.horizontal-form .control-list {
padding-top: 0; // has to be padding because margin collaspes
}
// Move over buttons in .form-actions to align with .controls
.horizontal-form .form-actions {
padding-left: 0;
}
// Modals
.modal {
position: fixed;
top: 20px;
left: 20px;
right: 20px;
width: auto;
.close {
padding: 10px;
}
}
}
// LANDSCAPE PHONE TO SMALL DESKTOP & PORTRAIT TABLET
// --------------------------------------------------
@media (max-width: 768px) {
// Unfix the navbar
.navbar-fixed {
position: absolute;
}
.navbar-fixed .nav {
float: none;
}
// Remove width from containers
.container {
width: auto;
padding: 0 20px;
}
// Undo negative margin on rows
.row {
margin-left: 0;
}
// Make all columns even
.row > [class*="span"] {
float: none;
display: block;
width: auto;
margin: 0;
}
}