Bootstrap 扩展一列为所有相邻列增加高度

Question

我在引导程序中有一个 4 列布局。每列都有文本和一个“显示更多”按钮，单击该按钮会展开并显示更多内容。

我面临的问题是，当单击“显示更多”链接时，不仅该列的内容会扩展，而且还会扩展高度，而不是所有其他的内容列也。其他列的多余内容不展开。

我知道问题来自引导 col-4 类。但我需要那个类来保持响应式设计。我只希望我单击“显示更多”的列展开。关于如何防止另一列高度膨胀的任何想法？

我的代码：

<script>
$(document).ready(function () {
    $('#collapseExample1').on('click', function () {
        var text=$('#collapseExample1').text();
        if(text === "Show more"){
            $(this).html("Show less");
        } else{
            $(this).html("Show more");
        }
     });
     $('#collapseExample2').on('click', function () {
         var text=$('#collapseExample2').text();
         if(text === "Show more"){
            $(this).html("Show less");
        } else{
            $(this).html("Show more");
        }
     });
     $('#collapseExample3').on('click', function () {
         var text=$('#collapseExample3').text();
         if(text === "Show more"){
            $(this).html("Show less");
        } else{
            $(this).html("Show more");
        }
     });
     $('#collapseExample4').on('click', function () {
         var text=$('#collapseExample4').text();
         if(text === "Show more"){
            $(this).html("Show less");
        } else{
            $(this).html("Show more");
        }
     });
});
</script>

<style>
    .card {
        width: 273px;
        min-height: 503px;
        border-radius: 7px;
        box-shadow: 0 0 8px 4px rgba(0,0,0,0.1);
        margin: 0 10px;
        position: relative;
        overflow: hidden;
}
</style>

<div class="d-flex justify-content-center">
    <div class="col-4 card">
        <div class="card-body text-center">
            some text
            <div class="collapse" id="example">
                the extra text
            </div>
            <a data-toggle='collapse' href='#example' id='collapseExample1' class='card-link'>Show more</a>
        </div>
    </div>
    <div class="col-4 card">
        <div class="card-body text-center">
            some text
            <div class="collapse" id="example2">
                the extra text
            </div>
            <a data-toggle='collapse' href='#example2' id='collapseExample2' class='card-link'>Show more</a>
        </div>
    </div>
    <div class="col-4 card">
        <div class="card-body text-center">
            some text
            <div class="collapse" id="example3">
                the extra text
            </div>
            <a data-toggle='collapse' href='#example3' id='collapseExample3' class='card-link'>Show more</a>
        </div>
    </div>
    <div class="col-4 card">
        <div class="card-body text-center">
            some text
            <div class="collapse" id="example4">
                the extra text
            </div>
            <a data-toggle='collapse' href='#example4' id='collapseExample4' class='card-link'>Show more</a>
        </div>
    </div>
</div>

Answer 1

只需像这样添加带有 col-4 的包装器

<div class="col-4">
    <div class="card">

.card {
        width: 273px;
        min-height: 50px;
        border-radius: 7px;
        box-shadow: 0 0 8px 4px rgba(0,0,0,0.1);
        margin: 0 10px;
        position: relative;
        overflow: hidden;
}

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex justify-content-center">
  <div class="col-4">
    <div class="card">
        <div class="card-body text-center">
            some text
            <div class="collapse" id="example">
                the extra text
            </div>
            <a data-toggle='collapse' href='#example' id='collapseExample1' class='card-link'>Show more</a>
        </div>
    </div>
  </div>
  <div class="col-4">
    <div class="card">
        <div class="card-body text-center">
            some text
            <div class="collapse" id="example2">
                the extra text
            </div>
            <a data-toggle='collapse' href='#example2' id='collapseExample2' class='card-link'>Show more</a>
        </div>
    </div>
  </div>
  <div class="col-4">
    <div class="card">
        <div class="card-body text-center">
            some text
            <div class="collapse" id="example3">
                the extra text
            </div>
            <a data-toggle='collapse' href='#example3' id='collapseExample3' class='card-link'>Show more</a>
        </div>
    </div>
  </div>
  <div class="col-4">
    <div class="card">
        <div class="card-body text-center">
            some text
            <div class="collapse" id="example4">
                the extra text
            </div>
            <a data-toggle='collapse' href='#example4' id='collapseExample4' class='card-link'>Show more</a>
        </div>
    </div>
  </div>
</div>

Answer 2

删除双重类 col-4 和 card 并通过将每个类放在自己单独的 div 上来嵌套它们，如下所示

<div class="col-4">
    <div class="card">
        <div class="card-body text-center">
            
        </div>
    </div>
</div>

.

<div class="d-flex justify-content-center">
<div class="col-4">
    <div class="card">
        <div class="card-body text-center">
            some text
            <div class="collapse" id="example">
                the extra text
            </div>
            <a data-toggle='collapse' href='#example' id='collapseExample1' class='card-link'>Show
                more</a>
        </div>
    </div>
</div>
<div class="col-4">
    <div class="card">
        <div class="card-body text-center">
            some text
            <div class="collapse" id="example2">
                the extra text
            </div>
            <a data-toggle='collapse' href='#example2' id='collapseExample2' class='card-link'>Show
                more</a>
        </div>
    </div>
</div>
<div class="col-4">
    <div class="card">
        <div class="card-body text-center">
            some text
            <div class="collapse" id="example3">
                the extra text
            </div>
            <a data-toggle='collapse' href='#example3' id='collapseExample3' class='card-link'>Show
                more</a>
        </div>
    </div>
</div>
<div class="col-4">
    <div class="card">
        <div class="card-body text-center">
            some text
            <div class="collapse" id="example4">
                the extra text
            </div>
            <a data-toggle='collapse' href='#example4' id='collapseExample4' class='card-link'>Show
                more</a>
        </div>
    </div>
</div>