Twitter Bootstrap inline forms

inline forms in twitter bootstrap aren't actually inline - only their child elements.

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
<a class="brand" href="#">Project</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active">
<a href="#">Home</a>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown1
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
<a href="#">foo</a>
</li>
<li>
<a href="#">bar</a>
</li>
</ul>
</li>
<li class="divider-vertical"></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown2
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>
<a href="#">bar</a>
</li>
<li>
<a href="#">baz</a>
</li>
</ul>
</li>
</ul>
<ul class="nav pull-right">
<li class="divider-vertical"></li>
<form class="form-inline inline">
<input class="input-small" type="text" placeholder="userid">
<input class="input-small" type="password" placeholder="password">
<label class="checkbox">
<input type="checkbox">
remember me
</label>
<button class="btn btn-inverse" type="submit">Sign in</button>
</form>
</ul>
</div>
</div>
</div>
</div>
    <div> Remove the comment (/*) for the inline class and re-run to see the effect.</div>

CSS

/*.inline {
    display: inline;
}