Bootstrap nicht aufrechterhalten Gitter

Question

es ist ein recht einfaches Bootstrap-Raster:

<div class="row"> 
    <div class="col-md-12"> 
    </div> 
</div> 

<div class="row"> 
    <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> 

, aber ich habe das bekam, was zuvor ein Formfehler wie ein reguläres direkt über der Form angeordnet gemacht Schienen mit einem Fehler bilden.

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

aber jetzt legt sie es auf der linken Seite, und mit der gleichen Höhe wie #home_form und wirft #home_list unter beiden.

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

edit:

<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

Als build_error vor #home_form eingesetzt wird, wird es:

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

Und Sie haben keine Bootstrap .col- Klasse auf dieses Element, so dass die .row negative Marge ist vermasselt deine Stile.

So eine Lösung ist, einige .col- Klasse auf diesem Element hinzuzufügen:

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