css - Rails 接触表单对齐

标签 css ruby-on-rails twitter-bootstrap

所以我在 rails 中有这个联系表

    <div class="field">
      <%= f.label :name %><br />
      <%= f.text_field :name %>
    </div>

    <div class="field">
      <%= f.label :email %><br />
      <%= f.text_field :email %>
    </div>

    <div class="field">
      <%= f.label :phone %><br />
      <%= f.text_field :phone %>
    </div>

    <div class="field">
      <%= f.label :description %><br />
      <%= f.text_area :description, :size=>"30x3" %>
    </div> <br/>


  <div class="actions">
    <%= f.submit "Submit" %>
  </div>
  <% end %>

我希望我的表单使用整页,即我希望直到电话的字段位于左侧,描述作为文本区域水平位于右侧。

类似于 this

我正在使用 bootstrap 和 rails。

我尝试在一部分中使用 col-md-4,在另一部分中使用 col-md-8。没有解决这个问题。 请帮忙。

最佳答案

根据我在这里制作的模板:

http://www.bootply.com/XAMvtjjoQw

你可以像这样让它适应 ruby :

<form>
  <div class="col-md-4">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>      
    <%= f.text_field :name, :class => "form-control" %>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <%= f.text_field :email, :class => "form-control" %>
  </div>
   <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <%= f.text_field :phone, :class => "form-control" %>
  </div>
    </div>
  <div class="col-md-8">
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <%= f.text_area :description, :class=>"form-control", :size=>"30x3" %>

  </div>
  </div>
</form>

关于css - Rails 接触表单对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27792545/

相关文章:

ruby-on-rails - 无法在 API Controller 中自动加载常量

javascript - 检测 Bootstrap 模式以更改按键输入的目的地

css - 更改容器的 Bootstrap 3 的边距

ruby-on-rails - Ruby on Rails 错误处理、捕获错误和消息

ruby-on-rails - 如何使用 'memcached' 在面向服务的体系结构中处理用户身份验证?

html - Bootstrap 网格系统是否与导航栏一起使用?

html - 使 CSS 主题响应

css - 垂直对齐底部不起作用

css - 有没有办法在 Firefox 中平滑字体图标?

css - bootstrap - 添加标签到 span