bootstrap form-inline-display-Felder in einer Zeile
Will ich mein Zeichen in form, um die Felder anzuzeigen, die in einer Zeile nebeneinander anstatt unter einander.
header:
Aktualisieren: dieser code funktioniert jetzt
<header class="navbar navbar-fixed-top navbar-inverse">
<div class="navbar-inner">
<div class="container">
<%= link_to "Apollo", root_path, id: "logo" %>
<nav>
<ul class="nav pull-right">
<%= form_for(:session, url: sessions_path, :html => { :class => "form-inline"}) do |f| %>
<input id="session_email" name="session[email]" type="text" class="input-medium" placeholder="Email">
<input id="session_password" name="session[password]" type="password" class="input-medium" placeholder="Password">
<button type="submit" class="btn btn-small btn-primary">Sign in</button>
<% end %>
</ul>
</nav>
</div>
</div>
</header>
Generierten HTML -
<header class="navbar navbar-fixed-top navbar-inverse">
<div class="navbar-inner">
<div class="container">
<a href="/" id="logo">Apollo</a>
<nav>
<ul class="nav pull-right">
<div class="row">
<div class="span2 offset3">
<form accept-charset="UTF-8" action="/sessions" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="xmS0FBX+pX8ZzBr/yHIUNmXOQMFI4krsv3FxIl51Hjg=" /></div>
<input id="session_email" name="session[email]" placeholder="Email" size="30" type="text" />
<input id="session_password" name="session[password]" placeholder="Password" size="30" type="password" />
<input class="btn btn-small btn-primary" name="commit" type="submit" value="Sign in" />
</form> </div>
</div>
</ul>
</nav>
</div>
</div>
</header>
Custom CSS.SCSS
@import "bootstrap";
/* mixins, variables, etc. */
$grayMediumLight: #eaeaea;
@mixin box_sizing {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* forms */
input, textarea, select, .uneditable-input {
border: 1px solid #bbb;
width: 100%;
padding: 10px;
margin-bottom: 15px;
@include box_sizing;
}
input {
height: auto !important;
}
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ändern Sie Ihre CSS.
Es ist nicht ein problem mit der anzeigen.
Wie es aussieht, bist du mit bootstrap, so fügen Sie die Klasse
.form-inline
zum Formular:Jeder
input
element innerhalb des Formulars angezeigt werden sollen, inline oder inline-block, und sollte so bemessen sein, passen alle Elemente in einer einzelnen Zeile. Jeder überlauf wird gestoßen in die nächste Zeile.Geben die form der a-Klasse. Zum Beispiel
inline_form
.Beispiel, die mit Ihrem code