Ruby on Railsについて

Question

がちがちの初心者です
device、Bootstrapを用いてlog in画面を作っています

session new.html.erb

<div class="container">
<div class="row">
  <div class='col-xs-3'> 
<h2>Log in</h2>
 <table class='table'>
<%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
<div class="field">
    <%= f.label :name %><br />
    <%= f.text_field :name, autofocus: true, autocomplete: "name" %>
  </div>

<div class="field">
    <%= f.label :email %><br />
    <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
  </div> 

  <div class="field">
    <%= f.label :password %><br />
    <%= f.password_field :password, autocomplete: "current-password" %>
  </div>

  <% if devise_mapping.rememberable? %>
    <div class="field">
      <%= f.check_box :remember_me %>
      <%= f.label :remember_me %>
    </div>
  <% end %>
</table>

  <div class="actions">
    <%= f.submit "Log in" , class:"btn btn-info "%></div><br>
<% end %>
</div>
</div>
</div>

 <%= render "devise/shared/links" %>
</div>

このように画面を作ったのですが、log inのボタンが効かなくなってしまいました。

</div>の位置を上にずらせばまた推せるようになるのですが、レイアウトが揃いません。

Bootstrapを用いたタグで囲ってしまうとボタンが効かなくなってしまうのは仕様なのでしょうか
何か正しい記述方法があれば教えていただきたいです。

Comments

[m.ts10806]

タグで表現できることはタイトルに書かなくても良いです。要件を記載してください。
ざっくりすぎるタイトルでは何も伝わりません。

[Yn_26247]

申し訳ありません
以後気をつけます。

[m.ts10806]

質問は編集できますので。

Answer 1

tableとformが互い違いになっているように見えますが大丈夫ですか？

<table class='table'>
<%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
途中省略
</table>

  <div class="actions">
    <%= f.submit "Log in" , class:"btn btn-info "%></div><br>
<% end %>