bootstrap form-inline在一行中顯示字段

我希望我的登錄表單在彼此相鄰而不是彼此之間顯示一行中的字段。bootstrap form-inline在一行中顯示字段

頭：

更新：此代碼現在工作

<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>

生成的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="&#x2713;" /><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>

定製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; 
}

來源

2012-12-16 Jaqx

更改你的CSS。

這不是view的問題。

它看起來像你使用的引導，因此該類.form-inline添加到窗體：

<%= form_for(:session, url: sessions_path, :html => { :class => "form-inline"}) do |f| %>

來源

2012-12-16 02:18:34 bookcasey

嘗試已經不適合某些原因 – Jaqx

，你能否告訴生成的HTML工作？ – bookcasey

已更新以上感謝 – Jaqx

形式中的每一個元素input應inline或內聯塊顯示，並應大小，以適合單行上的所有元素。任何溢出都會下降到下一行。

給表格一個類。例如，inline_form。

form.inline_form input { 
    display: inline-block; 
    width: 80px; //small for example 
}

Example using your code

來源

2012-12-16 08:17:11 Substantial

bootstrap form-inline在一行中顯示字段

回答

相關問題