我希望我的卡片列表折叠成 2 列，header 重复

Question

我正在使用 bootstrap 卡片生成 "table"，通过 $smarty 获取数据。当 viewport 变小时，我想将 table 折叠成 2 列。

这样 header 就会在左边，属性如下：姓名、日期、年龄。右边相应的列有数据，如：Fred, 12.12.2012, 41。

尝试使用 bootstrap 卡片中的内置响应功能，但是当 viewport 变小时，所有内容都会折叠成 1 列。 header 在上面。我已经试过了 jquery.basictable.min.js 但它不起作用。

所需结果的简单图形：

name | stewie
date | 124214
age  | 9000

name | bob
date | 45845
age  | 65

<div class="container-fluid">
    <div class="card">
        <div class="card-header">
            <div class="row">
                <div class="col-4">
                    <span class="font-medium-3">name</span>
                </div>
                <div class="col-4">
                    <span class="font-medium-3">date</span>
                </div>
                <div class="col-4">
                    <span class="font-medium-3">age</span>
                </div>
            </div>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-4">
                    <span class="font-medium-3">stewie</span>
                </div>
                <div class="col-4">
                    <span class="font-medium-3">124214</span>
                </div>
                <div class="col-4">
                    <span class="font-medium-3">9000</span>
                </div>
            </div>
            <div class="row">
                <div class="col-4">
                    <span class="font-medium-3">bob</span>
                </div>
                <div class="col-4">
                    <span class="font-medium-3">45845</span>
                </div>
                <div class="col-4">
                    <span class="font-medium-3">65</span>
                </div>
            </div>
        </div>
    </div>
</div>

我将在此处提供一个 link 来展示我想要实现的目标： http://www.jerrylow.com/basictable/demo/

我认为CSS可以做很多我需要的事情，但我找不到相关信息。

Answer 1

这是旧答案：

Not best solution but you can try this

Main factor is

@media screen and (max-width:768px) will detect mobile for responsive
flex-direction: [column/row] !important will change orientation of table

@media screen and (max-width:768px) {
  body {
    /* Yellow mean mobile */
    background-color: #ff0 !important;
  }
  .card {
    flex-direction: row !important;
  }
  .card .row {
    flex-direction: column !important;
    white-space: nowrap;
    margin-right: 0;
    margin-left: 0;
  }
  .card .card-body {
    display: flex;
    flex-direction: row !important;
    white-space: nowrap;
  }
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div class="container-fluid">
  <div class="card">
    <div class="card-header">
      <div class="row">
        <div class="col-4">
          <span class="font-medium-3">name</span>
        </div>
        <div class="col-4">
          <span class="font-medium-3">date</span>
        </div>
        <div class="col-4">
          <span class="font-medium-3">age</span>
        </div>
      </div>
    </div>
    <div class="card-body">
      <div class="row">
        <div class="col-4">
          <span class="font-medium-3">stewie</span>
        </div>
        <div class="col-4">
          <span class="font-medium-3">124214</span>
        </div>
        <div class="col-4">
          <span class="font-medium-3">9000</span>
        </div>
      </div>
      <div class="row">
        <div class="col-4">
          <span class="font-medium-3">bob</span>
        </div>
        <div class="col-4">
          <span class="font-medium-3">45845</span>
        </div>
        <div class="col-4">
          <span class="font-medium-3">65</span>
        </div>
      </div>
    </div>
  </div>
</div>

This is not solved

更新： 我花了很多时间用 jQuery

找到你的解决方案

所以你需要使用jQuery

所以一种方法是制作新元素来切换移动和桌面视图

像这样

如果有帮助，请将此作为答案提交

$(document).ready(function() {
  resposiveTable();
  $(window).resize(function() {
    resposiveTable(this);
  });
});

function resposiveTable(ele) {
  var win = $(window); //this = window
  if (win.width() < 768) {
    $(document.body).css("background-color", "lightyellow");
    $('.responsive-CardTB .card').hide();
    //GENERATE responsive
    if ($(".responsive-CardTB .mobile-content").length < 1) {
      var mobileview = document.createElement("div");
      $(mobileview).append('xxx');
      $(mobileview).addClass('mobile-content container');
      $('.responsive-CardTB')
        .append(mobileview);
    }
    $('.responsive-CardTB .mobile-content').show();
    updateContent();
  } else {
    $(document.body).css("background-color", "");
    $('.responsive-CardTB .card').show();
    $('.responsive-CardTB .mobile-content').hide();
  }
}

function updateContent() {
  var mbcontent = $(".responsive-CardTB .mobile-content")
  mbcontent.empty();
  $('.responsive-CardTB .card .card-body .row')
    .each(function(i, ele) {
      var row = $(document.createElement("div"));
      row.addClass('card container');

      $(ele).find('.col-4').each(function(index, element) {
        var rowdata = $(document.createElement("div"));
        rowdata.addClass('row');

        var header =
          $('.responsive-CardTB .card .card-header .row .col-4')
          .eq(index).html();
        var colhead = $(document.createElement("div"));
        colhead.addClass('card-header col-4').html(header);
        rowdata.append(colhead);

        var colbody = $(document.createElement("div"));
        colbody.addClass('card-body col-8').html($(element).html());
        rowdata.append(colbody);

        row.append(rowdata);
      });

      mbcontent.append(row);
    });
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div class="container-fluid responsive-CardTB">
  <div class="card">
    <div class="card-header">
      <div class="row">
        <div class="col-4">
          <span class="font-medium-3">name</span>
        </div>
        <div class="col-4">
          <span class="font-medium-3">date</span>
        </div>
        <div class="col-4">
          <span class="font-medium-3">age</span>
        </div>
      </div>
    </div>
    <div class="card-body">
      <div class="row">
        <div class="col-4">
          <span class="font-medium-3">stewie</span>
        </div>
        <div class="col-4">
          <span class="font-medium-3">124214</span>
        </div>
        <div class="col-4">
          <span class="font-medium-3">9000</span>
        </div>
      </div>
      <div class="row">
        <div class="col-4">
          <span class="font-medium-3">bob</span>
        </div>
        <div class="col-4">
          <span class="font-medium-3">45845</span>
        </div>
        <div class="col-4">
          <span class="font-medium-3">65</span>
        </div>
      </div>
    </div>
  </div>
</div>

我希望我的卡片列表折叠成 2 列，header 重复

I would like my card list to collapse into 2 columns, with header repeating

html

css

bootstrap-4

responsive

bootstrap-cards