使用 Bootstrap 4 Cards 的网格/列表切换视图

Question

我想使用 bootstrap 4 卡创建一个网格/列表视图。

<div class="well well-sm">
    <strong>Display:</strong>
    <div class="btn-group">
        <a href="#" id="list" class="btn btn-default btn-sm"><span class="fas fa-list-ul"></span>List</a> 
        <a href="#" id="grid" class="btn btn-default btn-sm"><span class="fas fa-th-large"></span>Grid</a>
    </div>
</div>

jquery：

$('#list').click(function(event){
  event.preventDefault();
  $('.card-deck').addClass('list-group-item');
  $('.card-deck').removeClass('grid-group-item');
  $(this).addClass('active');
  $('#grid').removeClass('active');
});

$('#grid').click(function(event){
  event.preventDefault();
  $('.card-deck').removeClass('list-group-item');
  $('#list').removeClass('active');
  $(this).addClass('active');
  $('.card-deck').addClass('grid-group-item');

});

我有另一个帖子的代码：Bootstrap 4 card/panel with image left of header and title

<div class="card">
    <div class="row no-gutters">
        <div class="col-auto">
            <img src="//placehold.it/200" class="img-fluid" alt="">
        </div>
        <div class="col">
            <div class="card-block px-2">
                <h4 class="card-title">Title</h4>
                <p class="card-text">Description</p>
                <a href="#" class="btn btn-primary">BUTTON</a>
            </div>
        </div>
    </div>
    <div class="card-footer w-100 text-muted">

    </div>
</div>

但我想要的是，当单击网格时，视图会变为堆叠的卡片块，如下所示：

<div class="card-deck>
    <div class="card" style="width: 18rem;">
        <img class="card-img-top" src="..." alt="Card image cap">
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
    </div>
</div>

如何做到这一点？ 它与 bootstrap 4 一起使用很重要。

感谢您的帮助。

纳比

Answer 1

首先，我会为您的每个容器添加一个id，例如类或 id 'grid-view' 和 'list-view'：

<div class="card" id="grid-view">
    <div class="row no-gutters">
        <div class="col-auto">
            <img src="//placehold.it/200" class="img-fluid" alt="">
        </div>
        <div class="col">
            <div class="card-block px-2">
                <h4 class="card-title">Title</h4>
                <p class="card-text">Description</p>
                <a href="#" class="btn btn-primary">BUTTON</a>
            </div>
        </div>
    </div>
    <div class="card-footer w-100 text-muted">

    </div>
</div>

和

<div class="card-deck" id="list-view">
    <div class="card" style="width: 18rem;">
        <img class="card-img-top" src="..." alt="Card image cap">
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
    </div>
</div>

然后我会在Js文件中使用hide()和show()函数：

$('#list').click(function(event){
    ...
    $('#grid-view').hide();
    $('#list-view').show();
});

$('#grid').click(function(event){
   ...
    $('#grid-view').show();
    $('#list-view').hide();
});

确保在页面初始化时隐藏其中一个视图。