Bootstrap ของ Twitter จัดรูปแบบรูปแบบอย่างง่าย

ฉันกำลังพยายามฟอร์แมตหน้าจอเข้าสู่ระบบเริ่มต้นอย่างง่ายด้วยรูปแบบง่าย ๆ ของ twitter bootstrap และฉันประสบปัญหาสำคัญ

ภาพหน้าจอ

นี่คือรหัสของฉัน:

<h2>Sign in</h2>

<%= simple_form_for(resource, :as => resource_name, :url => session_path(resource_name), :html => {:class => "form-horizontal"}) do |form| %>

<%= form.input :email, :autofocus => true %>
<%= form.input :password %>
<%= form.input :remember_me, :as => :boolean if devise_mapping.rememberable? %>
<%= form.button :submit, 'Sign in', :class => 'primary'%>
<% end %>

<%= render "links" %>

ฉันสามารถทำให้ระยะห่างระหว่างป้ายกำกับและช่องป้อนข้อมูลถูกต้องได้หากฉันเพิ่ม

.form-horizontal .controls {
  margin-left: 160px;
}

ไปที่ไฟล์ application.css ของฉัน แต่ฉันไม่เห็นสิ่งนี้ในแอปตัวอย่างของพวกเขาที่นี่ https://github.com/rafaelfranca/simple_form-bootstrap และฉันสับสนมากว่าการจัดรูปแบบที่เหมาะสมมาจากไหน

ฉันมีรหัสเกือบจะเหมือนกับคนนี้ https://github.com/rafaelfranca/simple_form-bootstrap/issues/6 แต่ฉันคิดว่ารหัสของเขาเก่ากว่า ฉันใช้รูปแบบธรรมดา 2.0.2 และฉันติดตั้ง bootstrap ด้วย twitter-bootstrap-rails 1.4.3 ฉันยังติดตั้งและถอนการติดตั้ง twitter bootstrap gems อื่น ๆ อีกสองสามตัวหากมีโอกาสที่ทำให้เกิดปัญหา

Edit: here is my produced code if that helps

เข้าสู่ระบบ

<form accept-charset="UTF-8" action="/admins/sign_in" class="simple_form form-horizontal" id="new_admin" method="post" novalidate="novalidate"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="xxx" /></div>

<div class="control-group email optional"><label class="email optional control-label" for="admin_email">Email</label><div class="controls"><input autofocus="autofocus" class="string email optional" id="admin_email" name="admin[email]" size="50" type="email" value="" /></div></div>
<div class="control-group password optional"><label class="password optional control-label" for="admin_password">Password</label><div class="controls"><input class="password optional" id="admin_password" name="admin[password]" size="50" type="password" /></div></div>
<div class="control-group boolean optional"><label class="boolean optional control-label" for="admin_remember_me">Remember me</label><div class="controls"><input name="admin[remember_me]" type="hidden" value="0" /><label class="checkbox"><input class="boolean optional" id="admin_remember_me" name="admin[remember_me]" type="checkbox" value="1" /></label></div></div>
<input class="btn primary" name="commit" type="submit" value="Sign in" />
</form>


<a href="/th/admins/password/new">Forgot your password?</a><br />

person user1071182    schedule 28.08.2012    source แหล่งที่มา


คำตอบ (1)


ว้าวนั่นมันเจ็บปวด ปรากฎว่ามีข้อผิดพลาดใน twitter-bootstrap-rails gem https://github.com/seyhunak/twitter-bootstrap-rails/issues/324

หากคุณมีปัญหานี้ ฉันขอแนะนำให้ถอนการติดตั้งอัญมณีนั้นและทุกสิ่งที่เกี่ยวข้องและทำตามคำแนะนำเหล่านี้ http://ruby.railstutorial.org/chapters/filling-in-the-layout?version=3.2#sec-custom_css

ที่จะเริ่มต้น. สรุปลิงค์:

  1. ติดตั้งอัญมณี 'bootstrap-sass'
  2. เพิ่มไฟล์ custom.css.scss ด้วย "@import 'bootstrap';" และคุณก็พร้อมที่จะไป
person user1071182    schedule 28.08.2012