mirror of
https://github.com/twbs/bootstrap.git
synced 2022-11-09 12:25:43 -05:00
fix the navbar click and a few jank responsive problems
This commit is contained in:
parent
06df91ac55
commit
4fa931e403
9 changed files with 209 additions and 153 deletions
140
docs/assets/css/bootstrap-responsive.css
vendored
140
docs/assets/css/bootstrap-responsive.css
vendored
|
@ -175,22 +175,23 @@
|
|||
margin-bottom: 36px;
|
||||
}
|
||||
.navbar-inner {
|
||||
padding: 10px;
|
||||
padding: 5px;
|
||||
background-image: none;
|
||||
}
|
||||
.navbar .container {
|
||||
padding: 0;
|
||||
}
|
||||
.navbar .brand {
|
||||
float: none;
|
||||
display: block;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
margin: 0;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
margin: 0 0 0 -5px;
|
||||
}
|
||||
.navbar .nav-collapse {
|
||||
clear: left;
|
||||
}
|
||||
.navbar .nav {
|
||||
float: none;
|
||||
margin: 9px 0;
|
||||
margin: 0 0 9px;
|
||||
}
|
||||
.navbar .nav > li {
|
||||
float: none;
|
||||
|
@ -217,8 +218,10 @@
|
|||
}
|
||||
.navbar .dropdown-menu {
|
||||
position: static;
|
||||
display: block;
|
||||
top: auto;
|
||||
left: auto;
|
||||
float: none;
|
||||
display: block;
|
||||
max-width: none;
|
||||
margin: 0 15px;
|
||||
padding: 0;
|
||||
|
@ -263,60 +266,83 @@
|
|||
height: 0;
|
||||
}
|
||||
}
|
||||
/*
|
||||
@media (min-width: 1210px) {
|
||||
|
||||
// Reset grid variables
|
||||
@gridColumns: 12;
|
||||
@gridColumnWidth: 70px;
|
||||
@gridGutterWidth: 30px;
|
||||
@siteWidth: 1170px;
|
||||
|
||||
// Bring grid mixins to recalculate widths
|
||||
.columns(@columns: 1) {
|
||||
width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
|
||||
}
|
||||
.offset(@columns: 1) {
|
||||
margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
|
||||
}
|
||||
|
||||
.container {
|
||||
width: @siteWidth;
|
||||
width: 1170px;
|
||||
}
|
||||
.row {
|
||||
margin-left: @gridGutterWidth * -1;
|
||||
margin-left: -30px;
|
||||
}
|
||||
[class*="span"] {
|
||||
margin-left: @gridGutterWidth;
|
||||
margin-left: 30px;
|
||||
}
|
||||
.span1 {
|
||||
width: 70px;
|
||||
}
|
||||
.span2 {
|
||||
width: 170px;
|
||||
}
|
||||
.span3 {
|
||||
width: 270px;
|
||||
}
|
||||
.span4 {
|
||||
width: 370px;
|
||||
}
|
||||
.span5 {
|
||||
width: 470px;
|
||||
}
|
||||
.span6 {
|
||||
width: 570px;
|
||||
}
|
||||
.span7 {
|
||||
width: 670px;
|
||||
}
|
||||
.span8 {
|
||||
width: 770px;
|
||||
}
|
||||
.span9 {
|
||||
width: 870px;
|
||||
}
|
||||
.span10 {
|
||||
width: 970px;
|
||||
}
|
||||
.span11 {
|
||||
width: 1070px;
|
||||
}
|
||||
.span12 {
|
||||
width: 1170px;
|
||||
}
|
||||
.offset1 {
|
||||
margin-left: 130px;
|
||||
}
|
||||
.offset2 {
|
||||
margin-left: 230px;
|
||||
}
|
||||
.offset3 {
|
||||
margin-left: 330px;
|
||||
}
|
||||
.offset4 {
|
||||
margin-left: 430px;
|
||||
}
|
||||
.offset5 {
|
||||
margin-left: 530px;
|
||||
}
|
||||
.offset6 {
|
||||
margin-left: 630px;
|
||||
}
|
||||
.offset7 {
|
||||
margin-left: 730px;
|
||||
}
|
||||
.offset8 {
|
||||
margin-left: 830px;
|
||||
}
|
||||
.offset9 {
|
||||
margin-left: 930px;
|
||||
}
|
||||
.offset10 {
|
||||
margin-left: 1030px;
|
||||
}
|
||||
.offset11 {
|
||||
margin-left: 1130px;
|
||||
}
|
||||
|
||||
// Default columns
|
||||
.span1 { .columns(1); }
|
||||
.span2 { .columns(2); }
|
||||
.span3 { .columns(3); }
|
||||
.span4 { .columns(4); }
|
||||
.span5 { .columns(5); }
|
||||
.span6 { .columns(6); }
|
||||
.span7 { .columns(7); }
|
||||
.span8 { .columns(8); }
|
||||
.span9 { .columns(9); }
|
||||
.span10 { .columns(10); }
|
||||
.span11 { .columns(11); }
|
||||
.span12 { .columns(12); }
|
||||
|
||||
// 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); }
|
||||
|
||||
}
|
||||
*/
|
4
docs/assets/css/bootstrap.css
vendored
4
docs/assets/css/bootstrap.css
vendored
|
@ -2315,8 +2315,8 @@ button.btn.small, input[type="submit"].btn.small {
|
|||
display: none;
|
||||
float: right;
|
||||
padding: 7px 10px;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
background-color: #2c2c2c;
|
||||
background-image: -moz-linear-gradient(top, #333333, #222222);
|
||||
background-image: -ms-linear-gradient(top, #333333, #222222);
|
||||
|
|
|
@ -522,6 +522,7 @@ h2 + .row {
|
|||
/* Example sites showcase */
|
||||
.example-sites img {
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.marketing-byline {
|
||||
margin: -18px 0 27px;
|
||||
|
@ -646,6 +647,10 @@ form.well {
|
|||
padding: 10px 14px;
|
||||
margin: 0 auto 10px;
|
||||
}
|
||||
/* Masthead (home page jumbotron) */
|
||||
.masthead {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
/* Don't space out quick links so much */
|
||||
.quick-links {
|
||||
|
@ -669,8 +674,9 @@ form.well {
|
|||
display: block;
|
||||
max-width: 300px;
|
||||
margin: 0 auto 18px;
|
||||
text-align: center;
|
||||
}
|
||||
.example-sites img {
|
||||
.example-sites .thumbnail > img {
|
||||
max-width: 270px;
|
||||
}
|
||||
|
||||
|
@ -796,11 +802,20 @@ form.well {
|
|||
|
||||
/* Unfloat brand */
|
||||
.navbar-fixed-top .brand {
|
||||
float: none;
|
||||
float: left;
|
||||
margin-left: 0;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* LARGE DESKTOP SCREENS */
|
||||
@media (min-width: 1210px) {
|
||||
|
||||
/* Update subnav container */
|
||||
.subnav-fixed .nav {
|
||||
width: 1168px; /* 2px less to account for left/right borders being removed when in fixed mode */
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -1497,7 +1497,7 @@ For example, <code>section</code> should be wrapped as inline.
|
|||
<div class="controls">
|
||||
<div class="input-prepend">
|
||||
<span class="add-on"><i class="icon envelope"></i></span>
|
||||
<input class="span32" id="iconInput" size="16" type="text">
|
||||
<input class="span2" id="iconInput" type="text">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -662,7 +662,13 @@
|
|||
<div class="navbar navbar-static">
|
||||
<div class="navbar-inner">
|
||||
<div class="container" style="width: auto;">
|
||||
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<span class="i-bar"></span>
|
||||
<span class="i-bar"></span>
|
||||
<span class="i-bar"></span>
|
||||
</a>
|
||||
<a class="brand" href="#">Project name</a>
|
||||
<div class="nav-collapse">
|
||||
<ul class="nav">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
|
@ -696,6 +702,7 @@
|
|||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div><!-- /.nav-collapse -->
|
||||
</div>
|
||||
</div><!-- /navbar-inner -->
|
||||
</div><!-- /navbar -->
|
||||
|
@ -733,7 +740,7 @@
|
|||
<input type="text" class="search-query pull-left" placeholder="Search">
|
||||
</form>
|
||||
</pre>
|
||||
</div>
|
||||
</div><!-- /.span -->
|
||||
<div class="span4">
|
||||
<h3>Nav links</h3>
|
||||
<p>Nav items are simple to add via unordered lists.</p>
|
||||
|
@ -764,8 +771,8 @@
|
|||
</ul>
|
||||
</pre>
|
||||
<p><a class="btn" href="./javascript.html/#dropdown">Get the javascript →</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- /.span -->
|
||||
</div><!-- /.row -->
|
||||
|
||||
</section>
|
||||
|
||||
|
|
2
docs/templates/pages/base-css.mustache
vendored
2
docs/templates/pages/base-css.mustache
vendored
|
@ -1425,7 +1425,7 @@
|
|||
<div class="controls">
|
||||
<div class="input-prepend">
|
||||
<span class="add-on"><i class="icon envelope"></i></span>
|
||||
<input class="span32" id="iconInput" size="16" type="text">
|
||||
<input class="span2" id="iconInput" type="text">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
13
docs/templates/pages/components.mustache
vendored
13
docs/templates/pages/components.mustache
vendored
|
@ -590,7 +590,13 @@
|
|||
<div class="navbar navbar-static">
|
||||
<div class="navbar-inner">
|
||||
<div class="container" style="width: auto;">
|
||||
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<span class="i-bar"></span>
|
||||
<span class="i-bar"></span>
|
||||
<span class="i-bar"></span>
|
||||
</a>
|
||||
<a class="brand" href="#">{{_i}}Project name{{/i}}</a>
|
||||
<div class="nav-collapse">
|
||||
<ul class="nav">
|
||||
<li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
|
||||
<li><a href="#">{{_i}}Link{{/i}}</a></li>
|
||||
|
@ -624,6 +630,7 @@
|
|||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div><!-- /.nav-collapse -->
|
||||
</div>
|
||||
</div><!-- /navbar-inner -->
|
||||
</div><!-- /navbar -->
|
||||
|
@ -661,7 +668,7 @@
|
|||
<input type="text" class="search-query pull-left" placeholder="{{_i}}Search{{/i}}">
|
||||
</form>
|
||||
</pre>
|
||||
</div>
|
||||
</div><!-- /.span -->
|
||||
<div class="span4">
|
||||
<h3>{{_i}}Nav links{{/i}}</h3>
|
||||
<p>{{_i}}Nav items are simple to add via unordered lists.{{/i}}</p>
|
||||
|
@ -692,8 +699,8 @@
|
|||
</ul>
|
||||
</pre>
|
||||
<p><a class="btn" href="./javascript.html/#dropdown">{{_i}}Get the javascript →{{/i}}</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- /.span -->
|
||||
</div><!-- /.row -->
|
||||
|
||||
</section>
|
||||
|
||||
|
|
|
@ -21,8 +21,8 @@
|
|||
display: none;
|
||||
float: right;
|
||||
padding: 7px 10px;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
.buttonBackground(@navbarBackgroundHighlight, @navbarBackground);
|
||||
@shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);
|
||||
.box-shadow(@shadow);
|
||||
|
|
|
@ -202,7 +202,7 @@
|
|||
margin-bottom: @baseLineHeight * 2;
|
||||
}
|
||||
.navbar-inner {
|
||||
padding: 10px;
|
||||
padding: 5px;
|
||||
background-image: none;
|
||||
}
|
||||
.navbar .container {
|
||||
|
@ -210,16 +210,18 @@
|
|||
}
|
||||
// Account for brand name
|
||||
.navbar .brand {
|
||||
float: none;
|
||||
display: block;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
margin: 0;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
margin: 0 0 0 -5px;
|
||||
}
|
||||
// Nav collapse clears brand
|
||||
.navbar .nav-collapse {
|
||||
clear: left;
|
||||
}
|
||||
// Block-level the nav
|
||||
.navbar .nav {
|
||||
float: none;
|
||||
margin: (@baseLineHeight / 2) 0;
|
||||
margin: 0 0 (@baseLineHeight / 2);
|
||||
}
|
||||
.navbar .nav > li {
|
||||
float: none;
|
||||
|
@ -248,8 +250,10 @@
|
|||
// Dropdowns in the navbar
|
||||
.navbar .dropdown-menu {
|
||||
position: static;
|
||||
display: block;
|
||||
top: auto;
|
||||
left: auto;
|
||||
float: none;
|
||||
display: block;
|
||||
max-width: none;
|
||||
margin: 0 15px;
|
||||
padding: 0;
|
||||
|
@ -301,7 +305,7 @@
|
|||
|
||||
// LARGE DESKTOP & UP
|
||||
// ------------------
|
||||
/*
|
||||
|
||||
@media (min-width: 1210px) {
|
||||
|
||||
// Reset grid variables
|
||||
|
@ -317,7 +321,6 @@
|
|||
.offset(@columns: 1) {
|
||||
margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
|
||||
}
|
||||
|
||||
.container {
|
||||
width: @siteWidth;
|
||||
}
|
||||
|
@ -354,7 +357,5 @@
|
|||
.offset9 { .offset(9); }
|
||||
.offset10 { .offset(10); }
|
||||
.offset11 { .offset(11); }
|
||||
.offset12 { .offset(12); }
|
||||
|
||||
}
|
||||
*/
|
Loading…
Reference in a new issue