Question

所以我在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

这样的东西

我正在使用带有rails的bootstrap。

我尝试使用col-md-4获得1份，将col-md-8测试为另一份。不解决这个问题。请帮忙。

Answer 1

我在这里制作的模板：

http://www.bootply.com/XAMvtjjoQw

你可以像这样适应红宝石：

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

Answer 2

对于纯HTML布局，您可以这样做：

<form action='' method='post'>

<div class='row'>

    <div class='col-md-2'>

        <div class='control-group'>
            <label for="name">Name</label>
            <input id="name" type='text' name='name' value='' class='form-control'>
        </div>

        <div class='control-group'>
            <label for="email">Email</label>
            <input id="email" type='text' name='email' value='' class='form-control'>
        </div>

        <div class='control-group'>
            <label for="phone">Phone</label>
            <input id="phone" type='text' name='phone' value='' class='form-control'>
        </div>

    </div>

    <div class='col-md-10'>

        <div class='control-group'>
            <label for="description">Description</label>
            <textarea id="description" name='description' class='form-control' rows='4'></textarea>
        </div>

        <div class='control-group'>
            <br><input type='submit' name='submit' value='Submit' class='btn btn-sm btn-info'>
        </div>

    </div>

</div>  

</form>

Rails联系表单对齐

2 个答案: