mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-05-21 13:24:08 +03:00
Code Activity

Overhaul navbar alignment (.pull-) utilities (fixes #9440)

Browse Source 
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
This commit is contained in:
Mark Otto
2013-08-13 15:19:59 -07:00
parent 8d2948c0d6
commit fa330f308a
4 changed files with 42 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components.html
+6 -5
View File
@@ -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>&lt;ul&gt;</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>&lt;ul&gt;</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>