18861


rails のslimとbootstrapを用いて  
webのフロントサイドの実装をしておりました。

field.control-groupの中に、11項目程の入力フォームがある  
アンケートフォームを作成しております。

以下のコードには2つしかありませんが、まだ、これが残り9つある状態です。

この実装でbootstrapのデザインがあたったフォームはつくれたのですが、  
入力フォーム間の感覚がほとんどなく、詰まった印象があります。

marginなどを変更し、入力フォーム間をあけようと、独自にcssを作成し、適用しようとしていたのですが、上手くいきませんでした。  
（css自体はあたっているのですが、field.control-groupが干渉するせいか、画面には反映されてませんでした。）

こういったケースではどうしたらいいでしょうか？

※やりたいこととしては、入力項目の間隔を広げたいです。

[code]

    = form_for @user, url: user_path(@user), html: {multipart: true, class: 'form-horizontal'} do |f|
      .field.control-group
        .col-sm-6
          = f.label :email, class: 'control-label'
        .col-sm-6
          = f.email_field :email, class: 'fld__input form-control'
    
      .field.control-group
        .col-sm-6
          = f.label :password
        .col-sm-6
          = f.password_field :password, class: 'fld__input form-control'
      .field.control-group
    
    ・
    ・
    ・
    続く
    
    
[/code]


CC BY-SA 3.0
2015-11-15T04:09:11.377
18834
2020-10-10T11:03:52.793
2020-10-10T11:03:52.793
32986
13175
question
ruby-on-rails css twitter-bootstrap
Bootstrapのfield.control-groupが干渉するせい？か、上手くcssが適応できませんでした


間隔を広げたいのは上下方向、という理解で合っていますか？

おそらく、`.row`で`.col-xxx`を挟んでやるとうまくいく気がします。

## Form

[code]

    = form_for @user, html: {multipart: true, class: 'form-horizontal'} do |f|
      .row
        .field.control-group
          .col-sm-6
            = f.label :email, class: 'control-label'
          .col-sm-6
            = f.email_field :email, class: 'fld__input form-control'
    
      .row
        .field.control-group
          .col-sm-6
            = f.label :password
          .col-sm-6
            = f.password_field :password, class: 'fld__input form-control'
    
[/code]

## CSS

[code]

    .control-group {
      margin-top: 50px;
    }
    
[/code]

`.row`がないとマージンが機能しないのは確認しました。

以下のjsfiddleでも実行結果を確認できます。

<https://jsfiddle.net/368g0612/>

[code]

    .control-group {
      margin-top: 50px;
    }
[/code]

[code]

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    
    <body>
      <main role="main">
        <form class="form-horizontal" id="new_user" enctype="multipart/form-data" action="/users" accept-charset="UTF-8" method="post">
          <div class="row">
            <div class="field control-group">
              <div class="col-sm-6">
                <label class="control-label" for="user_email">Email</label>
              </div>
              <div class="col-sm-6">
                <input class="fld__input form-control" type="email" name="user[email]" id="user_email" />
              </div>
            </div>
          </div>
          <div class="row">
            <div class="field control-group">
              <div class="col-sm-6">
                <label for="user_password">Password</label>
              </div>
              <div class="col-sm-6">
                <input class="fld__input form-control" type="password" name="user[password]" id="user_password" />
              </div>
            </div>
          </div>
        </form>
      </main>
    </body>
[/code]


CC BY-SA 4.0
2015-11-15T22:26:41.283
18861
2019-12-13T19:23:59.607
2019-12-13T19:23:59.607
32986
85
18834
answer