2つの列の高さを比較する列間のブートストラップ/移動div

Question

ブートストラップの同じ行の2つの列の高さを比較する方法はありますか？

この

サンプル1

サンプルは、だから私はページからの情報であることを1単純なページを開発しましたように私は何を開発してきたことです入力値から検索します。問題は、ユーザーが画像サンプル1とサンプル2のように値を動的に入力できることです。

サンプル1は、左列と右列の情報量が同じです。しかし、サンプル2は、情報の量が等しくない。

私が達成したいのは、高さに基づいて列を比較する方法があるかどうかです。左の列の高さが右の列の高さより大きい場合、Contact divセクションを左の列から右の列に移動したいと思います。私はそれをGoogleにしようとしましたが、私はこの問題に関しては何の解決策も得られません。

また、列の高さを比較するのではなく、別の方法がありますか？

ページは、ブートストラップを使用して開発されています。ここで

は、私がこれを尋ねるため

<div class="first-head"> 
    <div class="container"> 
    <section> 
     <div class="row"> 
     <div class="col-md-6 col-sm-6 first-head-img"> 
      <img src="images/2.png" alt="2" data-sr='enter left, move 50px, over 0.5s' /> 
     </div> 

     <div class="col-md-6 col-sm-6 first-head-descr"> 
      <h1 data-sr='enter right, move 50px, over 0.5s' >Ahmad Farhan</h1> 
      <p data-sr='enter right, move 50px, wait 0.2s, over 0.5s' ><i class="fa fa-envelope"></i>farhan@yahoo.com</p> 
      <p data-sr='enter right, move 50px, wait 0.4s, over 0.5s' ><i class="fa fa-phone-square"></i> +018 1234567</p> 
     </div> 
     </div> 
    </section> 
    </div> 
</div> 


<div class="first-position"> 
    <div class="container"> 
    <section> 
     <div class="row"> 
     <div class="col-md-12"> 
      <h1 data-sr='enter bottom, move 50px, wait 0.6s, over 0.5s' >Position Applied: Admin Executive</h1> 
     </div> 
     </div> 
    </section> 
    </div> 
</div> 


<div class="container"> 
    <section> 
    <div class="row"> 
     <div class="col-md-4"> 



     <div class="col-md-12 first-descr-objective"> 
      <i class="fa fa-ellipsis-h"></i> Objective 

      <svg class="first-descr-objective-line"> 
      <line x1="0" y1="0" x2="1000" y2="0" /> 
      </svg> 

      <p>To obtain a position of Public Relations, editing or research that utilizes my communication, analytical, and writing skill.</p> 
     </div> 




     <div class="col-md-12 first-descr-skills"> 
      <i class="fa fa-star"></i> Skills 

      <svg class="first-descr-skills-line"> 
      <line x1="0" y1="0" x2="1000" y2="0"/> 
      </svg> 

      <h3>Human Relation & Communication</h3> 
      <div class="progress-element"> 
      <div class="progress"> 
       <div class="progress-bar progress-bar-skills" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div> 
      </div> 
      </div> 
      <p>- communicated in writing and by phone to many customers.<br/>- communicated in writing and by phone to many customers.</p> 

      <h3>Administrative and Management</h3> 
      <div class="progress-element"> 
      <div class="progress"> 
       <div class="progress-bar progress-bar-skills" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div> 
      </div> 
      </div> 
      <p>- Gathering information to process customer account.<br/>- Organized billing to maintain timely account.<br/>- Improved training for incoming employees.</p> 
     </div> 




     <div class="col-md-12 first-descr-language"> 
      <i class="fa fa-language"></i> Language 

      <svg class="first-descr-language-line"> 
      <line x1="0" y1="0" x2="1000" y2="0"/> 
      </svg> 

      <p>English</p> 
      <div class="progress-element-language"> 
      <div class="progress"> 
       <div class="progress-bar progress-bar-language" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div> 
      </div> 
      </div> 
      <p>Bahasa Malaysia</p> 
      <div class="progress-element-language"> 
      <div class="progress"> 
       <div class="progress-bar progress-bar-language" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div> 
      </div> 
      </div> 
      <p>Mandarin</p> 
      <div class="progress-element-language"> 
      <div class="progress"> 
       <div class="progress-bar progress-bar-language" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> 
      </div> 
      </div> 
     </div> 




     <div class="col-md-12 first-descr-contact"> 
      <i class="fa fa-comment"></i> Contact 

      <svg class="first-descr-contact-line"> 
      <line x1="0" y1="0" x2="1000" y2="0"/> 
      </svg> 

      <p><i class="fa fa-phone"></i> +012 123 4567</p> 
      <p><i class="fa fa-facebook"></i> farhan/myFacebookPage</p> 
      <p><i class="fa fa-twitter"></i> farhan/MyTwiiterPage</p> 
     </div> 
     </div> 






     <div class="col-md-8"> 
     <div class="col-md-12 first-descr-employment"> 
      <i class="fa fa-plus"></i> Employment 

      <svg class="first-descr-employment-line"> 
      <line x1="0" y1="0" x2="1000" y2="0"/> 
      </svg> 
     </div> 

     <div class="col-md-1 first-descr-employment-square-part"> 
      <svg class="first-square"> 
      <rect x="0" y="0" width="8" height="8" style="fill:black;stroke:black;stroke-width:5;fill-opacity:1;stroke-opacity:1"> 
      </svg> 
      <br/> 
      <svg class="first-vr-line"> 
      <line x1="0" y1="0" x2="0" y2="1000"/> 
      </svg> 
     </div> 
     <div class="col-md-2 first-descr-employment-year"> 
      <p>2015 - 2016</p> 
     </div> 
     <div class="col-md-9 first-descr-employment-descr"> 
      <h3>Admin Officer <span>| Petaling Jaya</span></h3> 
      <p class="subhead">Lorem Ipsum</p> 
      <p>Are own entire former get should. Advantages boisterous day excelence boy. Out the fill between our two waiting wishing.</p> 
     </div> 

     <div class="col-md-1 first-descr-employment-square-part"> 
      <svg class="first-square"> 
      <rect x="0" y="0" width="8" height="8" style="fill:black;stroke:black;stroke-width:5;fill-opacity:1;stroke-opacity:1"> 
      </svg> 
      <br/> 
      <svg class="first-vr-line"> 
      <line x1="0" y1="0" x2="0" y2="1000"/> 
      </svg> 
     </div> 
     <div class="col-md-2 first-descr-employment-year"> 
      <p>2014 - 2015</p> 
     </div> 
     <div class="col-md-9 first-descr-employment-descr"> 
      <h3>Admin Clerk <span>| Bangsar</span></h3> 
      <p class="subhead">Lorem Ipsum</p> 
      <p>Are own entire former get should. Advantages boisterous day excelence boy. Out the fill between our two waiting wishing.</p> 
     </div> 

     <div class="col-md-1 first-descr-employment-square-part"> 
      <svg class="first-square"> 
      <rect x="0" y="0" width="8" height="8" style="fill:black;stroke:black;stroke-width:5;fill-opacity:1;stroke-opacity:1"> 
      </svg> 
      <br/> 
      <svg class="first-vr-line"> 
      <line x1="0" y1="0" x2="0" y2="1000"/> 
      </svg> 
     </div> 
     <div class="col-md-2 first-descr-employment-year"> 
      <p>2013 - 2014</p> 
     </div> 
     <div class="col-md-9 first-descr-employment-descr"> 
      <h3>Call Operator <span>| Bangsar</span></h3> 
      <p class="subhead">Lorem Ipsum</p> 
      <p>Are own entire former get should. Advantages boisterous day excelence boy. Out the fill between our two waiting wishing.</p> 
     </div> 




     <div class="col-md-12 first-descr-education"> 
      <i class="fa fa-plus"></i> Education 

      <svg class="first-descr-education-line"> 
      <line x1="0" y1="0" x2="1000" y2="0"/> 
      </svg> 
     </div> 

     <div class="col-md-12 first-descr-education-vr-part"> 
      <svg class="first-education-vr-line"> 
      <line x1="0" y1="0" x2="0" y2="1000"/> 
      </svg> 
     </div> 

     <div class="col-md-1 first-descr-education-square-part"> 
      <svg class="first-square"> 
      <rect x="0" y="0" width="8" height="8" style="fill:black;stroke:black;stroke-width:5;fill-opacity:1;stroke-opacity:1"> 
      </svg> 
      <br/> 
      <svg class="first-vr-line"> 
      <line x1="0" y1="0" x2="0" y2="1000"/> 
      </svg> 
     </div> 
     <div class="col-md-2 first-descr-education-year"> 
      <p>2012 - 2013</p> 
     </div> 
     <div class="col-md-9 first-descr-education-descr"> 
      <h3>Universiti Tun Hussien Onn (UTHM) <span>| Johor</span></h3> 
      <p class="subhead">Lorem Ipsum</p> 
      <p>Are own entire former get should. Advantages boisterous day excelence boy. Out the fill between our two waiting wishing.</p> 
     </div> 

     <div class="col-md-1 first-descr-education-square-part first-descr-education-square-se"> 
      <svg class="first-square"> 
      <rect x="0" y="0" width="8" height="8" style="fill:black;stroke:black;stroke-width:5;fill-opacity:1;stroke-opacity:1"> 
      </svg> 
      <br/> 
      <svg class="first-vr-line"> 
      <line x1="0" y1="0" x2="0" y2="1000"/> 
      </svg> 
     </div> 
     <div class="col-md-2 first-descr-education-year"> 
      <p>2011 - 2012</p> 
     </div> 
     <div class="col-md-9 first-descr-education-descr"> 
      <h3>Pahang Matericulation Technical College <span>| Pahang</span></h3> 
      <p class="subhead">Lorem Ipsum</p> 
      <p>Are own entire former get should. Advantages boisterous day excelence boy. Out the fill between our two waiting wishing.</p> 
     </div> 


     <div class="col-md-1 first-descr-education-square-part first-descr-education-square-part-2"> 
      <svg class="first-square"> 
      <rect x="0" y="0" width="8" height="8" style="fill:black;stroke:black;stroke-width:5;fill-opacity:1;stroke-opacity:1"> 
      </svg> 
     </div> 
     <div class="col-md-2 first-descr-education-year"> 
      <p>2010 - 2011</p> 
     </div> 
     <div class="col-md-9 first-descr-education-descr"> 
      <h3>Sekolah Menengah Teknik Kuala Krai <span>| Kelantan</span></h3> 
      <p class="subhead">Lorem Ipsum</p> 
      <p>Are own entire former get should. Advantages boisterous day excelence boy. Out the fill between our two waiting wishing.</p> 
     </div> 


     </div> 
    </div> 
    </section> 
</div> 

Answer 1

おかげで作業コードです。

あなたのdivの高さに一致させることを意図しているのであれば、若干確信していませんが、これは'matchheight'というJQueryプラグインで簡単に行えます。ここで見つけることができます。構文については、以下を参照してください。

$(function() { $('.item').matchHeight(options); });

オプションパラメータはオプションです（私は意味を成していることだと思う）が、オプションについては以下を参照してください可能な

デフォルトのオプションは次のとおりです。

byRow: true, 
property: 'height', 
target: null, 
remove: false 

は、この情報がお役に立てば幸い！