ブートストラップは、それはかなり基本的なブートストラップ・グリッドのグリッド

Question

を維持しません。

$(build_error).insertBefore("#home_form"); 

しかし今では左側にそれを置き、そして#home_formと同じ高さ、および両方の下#home_listをスロー。

build_error：

<% if @supporter.save %> 
     $("#home_list").html("<%= j render 'show_supporters' %>") 
     $("home_form").html("<%= j render 'form' %>") 
    <% else %> 
     $("#home_form").html("<%= j render 'form', supporter: @supporter %>") 
     $('#build_error').remove(); 
     <% if @supporter.errors.any? %> 
      var build_error = "<div class='alert alert-danger' id='build_error'>"; 
      build_error += "You've got <%= pluralize(@supporter.errors.count, 'error') %>."; 
      build_error += "<ul id='error_explanation'>"; 
      <% @supporter.errors.full_messages.each do |msg| %> 
      <% if msg === "Ip has already been taken" %> 
       <% msg = "You've already posted your support. Thanks!" %> 
      <% end %> 
      build_error += "<li><%= j msg %></li>"; 
      <% end %> 
      build_error += "</ul>"; 
      build_error += "</div>"; 
      $(build_error).insertBefore("#home_form"); 
     <% end %>   
    <% end %> 

編集：

<div class="row"> 
    <div class='alert alert-danger' id='build_error'>...</div> 

    <div class="col-md-4" id="home_form"> 
    <%= render "supporters/form" %> 
    </div> 
    <div class="col-md-8" id="home_list" id="home_list"> 
    <%= render 'supporters/show_supporters' %> 
    </div> 
</div> 

そして、あなたは上の任意のブートストラップ.col-クラスを持っていない：build_errorとして

<div class="row"> 
    <div class="col-md-4"> 
    <div id="home_form"> 
     <%= render "supporters/form" %> 
    </div> 
    </div> 
    <div class="col-md-8" id="home_list" id="home_list"> 
    <%= render 'supporters/show_supporters' %> 
    </div> 
</div> 

Answer 1

が#home_form前に挿入され、それはなりその要素は、.rowの余白があなたのスタイルを台無しにする。

var build_error = "<div class='alert alert-danger col-md-12' id='build_error'>";