Бутстрап HTML-печать (хром)

Question

Я изучил несколько SO вопросов, но не нашел полного ответа. Я использую загрузчик с HTML 5. Я пытаюсь создать страницу, которая может поместиться на печатной бумаге (8,5x11 или A4) для отчетов. Однако я сталкиваюсь с рядом проблем, связанных с печатью.

Ячейки начальной загрузки имеют тенденцию складываться, когда я использую ctrl + p, и не сохраняют форматирование, которое они делают на рабочем столе. Любое дополнительное форматирование, например цвета шрифта, не отображается в окне предварительного просмотра. Поля также не совпадают. Как я могу использовать начальную загрузку и создать страницу отчета, которая выглядит одинаково как на рабочем столе, так и в распечатанном виде?

Вот краткий пример того, с чем я работаю:

HTML

<div class="container">
  <div class="row">
   <div class="col-sm-6">
     <h2>Person Name</h2>
   </div>
   <div class="col-sm-6">
     <p>Height</p>
   </div>
 </div>
</div>

CSS

@media print{
   @page {
      size: A4;
      margin: 0cm;
    }
    html, body {
      width: 1024px;
    }
    body {
      margin: 0 auto;
    }
    nav {
      display: none;
    }
 }

Вместо того, чтобы "Имя человека" и "Высота" находились в соседних столбцах при печати, они располагаются друг над другом, в отличие от вида рабочего стола.

Любая помощь очень ценится!

Answer 1

Возможно, поле принтера мешает просмотру столбца.

CSS:

@media print{
   @page {
      size: A4;
      margin: 0cm;
    }
    html, body {
      width: 1024px;
    }
    .container {
      width: auto;
    }
    body {
      margin: 0 auto;
    }
    nav {
      display: none;
    }
    .col-6-print{
      flex:0 0 50% !important;
    }
 }

HTML:

<div class="container">
  <div class="row">
    <div class="col-sm- col-6-print6">
      <h2>Person Name</h2>
    </div>
    <div class="col-sm-6 col-6-print">
      <p>Height</p>
    </div>
  </div>
</div>