Twitter-Bootstrap: login-Formular in der Navigationsleiste

Möchte ich um ein login-inline-form in einer twitter-navbar.

Habe ich dies getan, aber ich Schaffe es nicht, schieben Sie die form rechts...
http://jsfiddle.net/v34Sv/

Alle twitter-Komponenten (span -, offset -, pull-rechts) fehl, und ich bin besorgt, zu verlieren, die reaktionsfähige Komponente, wenn Sie mit einer absoluten position.

InformationsquelleAutor dev.pus | 2012-07-04

twitter-bootstrap

Wird der button nicht in der perfekte Ort, aber zumindest die form ist inline (ich hoffe, es hilft).

<div class='navbar'>
 <div class='navbar-inner'>
    <div class='container-fluid'>
        <a class='brand'>Test</a>
        <ul class='nav'>
            <li><a>Item 1</a></li>
            <li><a>Item 2</a></li>
        </ul>
        <form class="navbar-search pull-right">
            <input type="text" class="span2" placeholder="Login">
            <input type="text" class="span2" placeholder="Password">
            <input type="submit" value="Login" class="btn"/>
        </form>
     </div>
  </div>
</div>

fyi würde dieses Update die Ausrichtung: style="margin-top: 0px; vertical-align: top;" Und für diejenigen, die rocking MVC: @Html.ActionLink("Log On", "LogOn", "Account", new { @class = "btn", @style="margin-top: 0px; vertical-align: top;" }) (Oder verwenden Sie die Klasse navbar-form" von unten 😉
Dies funktioniert nicht richten Sie die Schaltfläche richtig.
Versuchen Sie die Antwort unten

InformationsquelleAutor Pigueiras

form von inline mit Knopf an der richtigen Stelle

<div class="container-fluid">
<div class='navbar'>
    <div class='navbar-inner'>
        <div class='container-fluid'>
            <a class='brand'>Test</a>
            <ul class='nav'>
                <li><a>Item 1</a></li>
                <li><a>Item 2</a></li>
            </ul>
            <form class="navbar-form pull-right">
                <input type="text" class="span2" placeholder="Login">
                <input type="text" class="span2" placeholder="Password">
                <input type="submit" value="Login" class="btn"/>
            </form>
        </div>
    </div>
</div>

+1 das ist wirklich die richtige Antwort, wie es erfordert keine zusätzliche Korrektur für die Schaltfläche Ausrichtung

InformationsquelleAutor zelle7

Die Klasse navbar-form ist hergestellt nur für diese.

<form class="navbar-form form-inline pull-right">
    <input type="text" placeholder="Email">
    <input type="password" placeholder="Password">
    <button type="submit" class="btn">Sign in</button>
</form>

Entnommen http://examples.getbootstrap.com/jumbotron/index.html?

Sieht aus wie der link ist tot

InformationsquelleAutor user1098798

HTML:

<div class='navbar'>
  <div class='navbar-inner'>
    <div class='container-fluid'>
      <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    <a class='brand'>Test</a>
    <ul class='nav nav-collapse collapse'>
        <li><a>Item 1</a></li>
        <li><a>Item 2</a></li>

    </ul>
    <ul class='nav nav-collapse collapse pull-right'>
        <li class=""><form class="navbar-search">
        <input type="text" class="span2" placeholder="Login">
        <input type="text" class="span2" placeholder="Password">
        <input type="submit" value="Login" class="btn"/>
    </form></li>
    </ul>
 </div>

CSS:

form.login {
  border: 1px solid red;
}

form.login input {
  height: 14px;
  width: 140px;
  background: #F5F5F5;
  border-radius: 2px;
}

@media (min-width:768px) {
  .navbar-search .btn {
    margin:-9px 0 0 0;
  }
}