diff options
| author | Mark Otto <[email protected]> | 2013-08-13 15:19:59 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2013-08-13 15:19:59 -0700 |
| commit | fa330f308aace22886fee3dbacbcbd4f8adb0fe6 (patch) | |
| tree | 1fc9ae613e1077d48e98a841e5bcf95e805ef0fc /components.html | |
| parent | 8d2948c0d6d5b9f753e917aa36fe43549e696e97 (diff) | |
| download | bootstrap-fa330f308aace22886fee3dbacbcbd4f8adb0fe6.tar.xz bootstrap-fa330f308aace22886fee3dbacbcbd4f8adb0fe6.zip | |
Overhaul navbar alignment (.pull-) utilities (fixes #9440)
Now navbars have their own float utility classes, mixin-ed versions of
`.pull-left` and `.pull-right`.
* Removed chained `.navbar-nav.pull-right`
* Added `.navbar-left` and `.navbar-right` as mixins of the default
float utilities, but only above the `@grid-float-breakpoint` to match
the new navbar behavior
* Updated components docs to match the new changeas
* Added callout about component alignment here to explain the new
classes
Diffstat (limited to 'components.html')
| -rw-r--r-- | components.html | 11 |
1 files changed, 6 insertions, 5 deletions
diff --git a/components.html b/components.html index ef98af541..17a96e86b 100644 --- a/components.html +++ b/components.html @@ -1128,13 +1128,13 @@ base_url: "../" </ul> </li> </ul> - <form class="navbar-form pull-left" role="search"> + <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> - <ul class="nav navbar-nav pull-right"> + <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> @@ -1179,13 +1179,13 @@ base_url: "../" </ul> </li> </ul> - <form class="navbar-form pull-left" action="" role="search"> + <form class="navbar-form navbar-left" action="" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> - <ul class="nav navbar-nav pull-right"> + <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> @@ -1282,7 +1282,8 @@ base_url: "../" {% endhighlight %} <h3 id="navbar-component-alignment">Component alignment</h3> - <p>Align nav links, forms, buttons, or text, using the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction. To align nav links, put them in a separate <code><ul></code> with the respective utility class applied.</p> + <p>Align nav links, forms, buttons, or text, using the <code>.navbar-left</code> or <code>.navbar-right</code> utility classes. Both classes will add a CSS float in the specified direction. For example, to align nav links, put them in a separate <code><ul></code> with the respective utility class applied.</p> + <p>These classes are mixin-ed versions of <code>.pull-left</code> and <code>.pull-right</code>, but they're scoped to media queries for easier handling of navbar components across device sizes.</p> <h2>Optional display variations</h2> |