0

フォームフィールドを下ではなく横に並べたいレールアプリケーションがあります。私ができる最善のことは、フォームインラインを使用してそれらを並べることですが、ラベルは左に揃えられます。ラベルは上部にある必要があります。また、フォーム フィールドのサイズを正確に半分に保つ方法も知りたいです。私のコードは次のとおりです。

<div class="container">
  <%= form_for '#' do |f|%>
    <div class= "hero-unit">

        <%=f.label "First Name"%>
        <%=f.text_field '#', :class=>"span5" %>

        <%=f.label "Last Name" %>
        <%=f.text_field '#', :class=>"span5" %>
           </div>
   <% end %>
</div>

そして、これは次のようになります:これが出力ですしかし、私が必要とするのは:これが私の要件です

助けてください。

4

2 に答える 2

1

目的を達成するには、Bootstrap Grid Systemを使用する必要があります。Bootstrap には、12 列に分割されたグリッドがあります。入力は、同じ行で、ネスト、積み重ね、オフセットなどを行うことができます。「行」クラスを使用して水平列を作成し、コンテンツをまたがる列の事前定義されたグリッド クラスを使用します。

あなたの場合、次のように、2 つのグリッド列を持つ行が必要になります。

<div class="container">
  <%= form_for '#' do |f|%>
    <div class="hero-unit">

      <div class="row">
        <div class="col-md6">
          <%=f.label "First Name"%>
          <%=f.text_field '#' %>
        </div>

        <div class="col-md6">
          <%=f.label "Last Name" %>
          <%=f.text_field '#' %>
        </div>
      </div>

    </div>
  <% end %>
</div>
于 2015-07-10T04:55:14.200 に答える
0 
<div class="new">
    <form>
        <div class="new-two"><label>Label name</label><br>
        <input type="text" placeholder="Type something…"></div>
        <div class="new-one"><label>Label name</label><br>
        <input type="text" placeholder="Type something…"></div>
    </form>
</div>

CSS:

.new-one {
    position: relative;
    display: inline-block;
    margin-left: 300px;
}

.new-two {
    position: absolute;
    margin-left:40px;
}

.new {
    background-color: lightgrey;
    padding: 20px;
 }

フィドル: http://jsfiddle.net/7V3F7/

于 2013-10-06T17:49:44.790 に答える