javascript - 比较两列高度 Bootstrap/在列之间移动 div

Question

有没有办法比较 Bootstrap 中同一行的两列高度？

我开发的是这样的

示例 1

示例 2

因此我开发了一个简单的页面，该页面的信息是从输入值中检索的。问题是用户可以像从图像样本 1 和样本 2 那样动态输入值。

样本 1 的左列和右列信息量相等。而样本2的信息量不等。

所以，我想完成的是是否有一种方法可以根据高度来比较列。如果左列的高度大于右列，我想将 Contact div 部分从左列移动到右列。我试图用谷歌搜索它，但我没有得到关于这个问题的任何解决方案。

或者除了比较列的高度还有其他方法吗？

页面使用Bootstrap开发。

这是我正在处理的代码

<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 插件来完成。 .它可以在这里找到，语法请看下面。

$(函数() { $('.item').matchHeight(选项); });

options 参数是可选的(我认为这是有道理的)，但请参阅下面的可用选项

默认选项是:

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

希望这对您有所帮助!