javascript - 如何将 Bootstrap 列高度与纯 jQuery 相匹配？

Question

我知道有一个名为 match-height.js 的库已经为您完成了这项工作，但我正在尝试从头开始。我有两列的行，第一列有一个居中(水平和垂直)的黑色方 block 。第二列有一个标题和一个段落。我只想将列的高度与类“about-wrapper”相匹配。

HTML:

<div class="container-fluid" id="about-section">
    <div class="row">

        <div class="col-md-4 about-wrapper" id="about-logo-wrapper">
            <div id="about-logo"></div>
        </div>

        <div class="col-md-8 about-wrapper" id="about-text-wrapper">
            <h2 class="main-heading" id="about-heading"> ABOUT THE CEO </h2>
            <p class="main-body" id="about-body">
                Paragraph content goes here...
            </p>
        </div>


    </div>
</div>

CSS:

#about-logo-wrapper {
    display: flex;
    justify-content: center;
    padding: 0px;
    margin-bottom: 50px;
    border: 3px solid red;
}

#about-logo {
    height: 200px;
    width: 200px;
    max-width: 300px;
    background: black;
    margin: 0px auto;
    align-self: center;
}

jQuery:

$(document).ready(function(){
    $("#about-logo-wrapper").height = $("#about-text-wrapper").height;
});

Answer 1

您使用的 height() 有误。它是一个函数，而不是一个属性，当你想用它来设置高度时它需要一个参数......

$(document).ready(function(){
    $("#about-logo-wrapper").height($("#about-text-wrapper").height());
});

有关更多信息，请参阅文档...

http://api.jquery.com/height/