引導不維持電網

Question

這是一個非常基本的引導電網：

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

但是我這有，這在以前直接放置像一個普通的渲染軌有錯誤形成上述表單格式錯誤。

$(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="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

由於build_error#home_form被插入之前，就變成：

<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-類該元素，所以.row負邊距是搞亂你的風格。

所以，一個解決辦法是添加元素的一些.col-類：

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