Databases
StackOverflow2013
Postsdbo
PObootstrap form-inline to display fields in one row
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PObootstrap form-inline to display fields in one row
    text
    copied!<p>I want my sign in form to display the fields in a row next to each other instead of under each other. </p> <p>header:</p> <p>Update: this code works now</p> <pre><code>&lt;header class="navbar navbar-fixed-top navbar-inverse"&gt; &lt;div class="navbar-inner"&gt; &lt;div class="container"&gt; &lt;%= link_to "Apollo", root_path, id: "logo" %&gt; &lt;nav&gt; &lt;ul class="nav pull-right"&gt; &lt;%= form_for(:session, url: sessions_path, :html =&gt; { :class =&gt; "form-inline"}) do |f| %&gt; &lt;input id="session_email" name="session[email]" type="text" class="input-medium" placeholder="Email"&gt; &lt;input id="session_password" name="session[password]" type="password" class="input-medium" placeholder="Password"&gt; &lt;button type="submit" class="btn btn-small btn-primary"&gt;Sign in&lt;/button&gt; &lt;% end %&gt; &lt;/ul&gt; &lt;/nav&gt; &lt;/div&gt; &lt;/div&gt; &lt;/header&gt; </code></pre> <p>Generated HTML</p> <pre><code>&lt;header class="navbar navbar-fixed-top navbar-inverse"&gt; &lt;div class="navbar-inner"&gt; &lt;div class="container"&gt; &lt;a href="/" id="logo"&gt;Apollo&lt;/a&gt; &lt;nav&gt; &lt;ul class="nav pull-right"&gt; &lt;div class="row"&gt; &lt;div class="span2 offset3"&gt; &lt;form accept-charset="UTF-8" action="/sessions" method="post"&gt;&lt;div style="margin:0;padding:0;display:inline"&gt;&lt;input name="utf8" type="hidden" value="&amp;#x2713;" /&gt;&lt;input name="authenticity_token" type="hidden" value="xmS0FBX+pX8ZzBr/yHIUNmXOQMFI4krsv3FxIl51Hjg=" /&gt;&lt;/div&gt; &lt;input id="session_email" name="session[email]" placeholder="Email" size="30" type="text" /&gt; &lt;input id="session_password" name="session[password]" placeholder="Password" size="30" type="password" /&gt; &lt;input class="btn btn-small btn-primary" name="commit" type="submit" value="Sign in" /&gt; &lt;/form&gt; &lt;/div&gt; &lt;/div&gt; &lt;/ul&gt; &lt;/nav&gt; &lt;/div&gt; &lt;/div&gt; &lt;/header&gt; </code></pre> <p>Custom CSS.SCSS</p> <pre><code>@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; } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload