Вопрос:

Я хотел бы, чтобы мой список карт свернулся в 2 столбца с повторением заголовка

html css bootstrap-4 responsive bootstrap-cards

47 просмотра

1 ответ

22 Репутация автора

Я генерирую с "table"помощью загрузочных карт, извлекая данные через $smarty. Я хотел бы свернуть таблицу в 2 столбца, когда viewportстановится мало.

Так что заголовок будет слева, с такими атрибутами, как: имя, дата, возраст. И соответствующий столбец справа содержит данные в строке, как: Фред, 12.12.2012, 41.

Попытка использовать встроенную адаптивную функцию в картах начальной загрузки, однако, когда viewportстановится мало, все сворачивается в 1 столбец. С заголовком сверху. Я пытался, 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>

Я приведу здесь ссылку, чтобы показать, чего я хотел бы достичь: http://www.jerrylow.com/basictable/demo/

Я предполагаю, что CSS может сделать многое из того, что мне нужно, но я не могу найти соответствующую информацию.

Автор: user2008560 Источник Размещён: 09.08.2019 07:55

Ответы (1)


0 плюса

216 Репутация автора

ЭТО СТАРЫЙ ОТВЕТ:

Не лучшее решение, но вы можете попробовать это

Основным фактором является

  • @media screen and (max-width:768px) обнаружит мобильный для отзывчивого
  • flex-direction: [column/row] !important изменит ориентацию стола

@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>

Это не решается

 

ОБНОВЛЕНИЕ: я потратил много времени, чтобы найти ваше решение с 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>

Автор: I'm Limit Размещён: 09.08.2019 09:06
Вопросы из категории :
32x32