html - 在 Bootstrap 中创建一个可折叠的行

Question

我有一个 .container，里面有 2 个 .row，每个 .row 有 4 列。我的 html 中的底行是我希望在页面加载时折叠的行。

按下按钮时，我希望底行展开，再次按下时，我希望它折叠。在 Bootstrap 中创建可折叠行的最佳方法是什么？我见过的大多数示例都使用表格，而我在这里没有使用任何表格。

<!-- Team -->
<div id="team">
    <div class="container">
        <h1>Summit Team Members</h1>
        <hr>

        <div class="row">
            <div class="col-md-3">
                <img class="img-responsive img-circle" src="http://placehold.it/250x250" alt="">
                <h3>Team Member Name</h3>
                <a class="btn btn-primary" href="" role="button"><i class="fa fa-angle-double-right fa-align-center fa-fw fa-1x"></i>Learn More</a>
            </div>
            <div class="col-md-3">
                <img class="img-responsive img-circle" src="http://placehold.it/250x250" alt="">
                <h3>Team Member Name</h3>
                <a class="btn btn-primary" href="" role="button"><i class="fa fa-angle-double-right fa-align-center fa-fw fa-1x"></i>Learn More</a>
            </div>
            <div class="col-md-3">
                <img class="img-responsive img-circle" src="http://placehold.it/250x250" alt="">
                <h3>Team Member Name</h3>
                <a class="btn btn-primary" href="" role="button"><i class="fa fa-angle-double-right fa-align-center fa-fw fa-1x"></i>Learn More</a>
            </div>
            <div class="col-md-3">
                <img class="img-responsive img-circle" src="http://placehold.it/250x250" alt="">
                <h3>Team Member Name</h3>
                <a class="btn btn-primary" href="" role="button"><i class="fa fa-angle-double-right fa-align-center fa-fw fa-1x"></i>Learn More</a>
            </div>
        </div> <!-- end row -->

        <div class="row">
            <div class="col-md-3">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat veritatis, doloribus quisquam beatae, incidunt ipsam error laborum atque vero nobis ipsa deleniti porro, qui eius dignissimos. Suscipit, exercitationem, ducimus! Quisquam?</p>
            </div>
            <div class="col-md-3">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat veritatis, doloribus quisquam beatae, incidunt ipsam error laborum atque vero nobis ipsa deleniti porro, qui eius dignissimos. Suscipit, exercitationem, ducimus! Quisquam?</p>
            </div>
            <div class="col-md-3">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat veritatis, doloribus quisquam beatae, incidunt ipsam error laborum atque vero nobis ipsa deleniti porro, qui eius dignissimos. Suscipit, exercitationem, ducimus! Quisquam?</p>
            </div>
            <div class="col-md-3">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat veritatis, doloribus quisquam beatae, incidunt ipsam error laborum atque vero nobis ipsa deleniti porro, qui eius dignissimos. Suscipit, exercitationem, ducimus! Quisquam?</p>
            </div>
        </div> <!-- end row -->

    </div> <!-- end container -->
</div> <!-- end team -->

/*==================
TEAM
===================*/
#team {
text-align: center;
}

Answer 1

只需使用 collapse 由 Bootstrap 提供。

您不需要任何 JavaScript 代码。

行和按钮的基本标记:

<div id="collapseExample" class="row collapse">
  Your content
</div>
<button class="btn btn-info btn-block btn-toggle" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Toggle</button>

如果您想在页面加载时默认打开此行，只需将 in 类添加到您的 row 并将 aria-expanded 更改为true 在你的 button

CODEPEN EXAMPLE