Bootstrap теряет макет, печатающий портрет

Я создал то, что выглядело как пригодный для использования шаблон с веб-сайта, и с радостью начал его использовать. Мой принтер изначально был настроен на альбомную ориентацию, когда я распечатывал информацию, поэтому все выглядело нормально, и я получил красивый отчет, аккуратно расположенный по центру страницы. Ниже приведен файл, который я сгенерировал (я использую шаблоны jinja2, но если я знаю, что не так с HTML/CSS, я могу исправить шаблоны).

<!DOCTYPE html>
<html lang = "en">
  <head>
    <meta charset = "utf-8">
    <meta http-equiv = "X-UA-Compatible" content = "IE=edge">
    <meta name = "viewport" content = "width=device-width, initial-scale=1">
    <!-- Bootstrap 4, from LayoutIt! -->
    <title>SPoE Testing</title>

    <meta name = "description" content = "Source code generated using layoutit.com">
    <meta name = "author" content = "LayoutIt!">

    <link href = "css/bootstrap.min.css" rel = "stylesheet">
    <link href = "css/style.css" rel = "stylesheet">

  </head>
  <body>
    <div class = "container-fluid">
    <div class = "row">
        <div class = "col-md-3">
        </div>
        <div class = "col-md-6">
            <div class = "page-header">
                <h1>
                    Integrated Next-Generation Test System
                </h1>
                <hr>
            </div>
        </div>
        <div class = "col-md-3">
        </div>
    </div>
    <div class = "row">
        <div class = "col-md-3">
        </div>
        <div class = "col-md-6">
            <div class = "page-header">
                <h2>
                    Single PoE <small>Unit 0000000 at 2019-05-23 23:59:59</small>
                </h2>
                <hr>
            </div>
            <div class = "row">
                <div class = "col-md-4">
                <h3>#0000000</h3>
                </div>
                <div class = "col-md-8">
                <h3>pass</h3>
                </div>
            </div>

            <div class = "row">
                <div class = "col-md-4">
                <h5>Step 1</h5>
                </div>
                <div class = "col-md-8">
                <h5>pass</h5>
                </div>
            </div>

            <div class = "row">
                <div class = "col-md-1"></div>
                <div class = "col-md-3">
                power
                </div>
                <div class = "col-md-8">
                28.1
                </div>
            </div>

            <div class = "row">
                <div class = "col-md-1"></div>
                <div class = "col-md-3">
                current
                </div>
                <div class = "col-md-8">
                525
                </div>
            </div>

            <div class = "row">
                <div class = "col-md-1"></div>
                <div class = "col-md-3">
                voltage
                </div>
                <div class = "col-md-8">
                53.7
                </div>
            </div>

        </div>
        <div class = "col-md-3">
        </div>
    </div>
</div>

    <script src = "js/jquery.min.js"></script>
    <script src = "js/bootstrap.min.js"></script>
    <script src = "js/scripts.js"></script>
  <style type = "text/css"> @page { size: auto } </style>
  </body>
</html>

Как вы можете видеть, это отлично печатает в альбомной ориентации:

К сожалению, когда я пытаюсь печатать в портретном режиме, вывод выглядит менее убедительно: Bootstrap теряет макет, печатающий портрет

Встроенный @page { size: auto } — это то, что я добавил в результате своих исследований — это было рекомендовано в этот вопрос, но, увы, это не имеет значения. Интересно, что, хотя я нашел несколько вопросов, связанных с невозможностью печати в альбомной ориентации, похоже, никто другой не нашел проблему в портретной ориентации.

Как дизайнер я довольно хороший каменщик, поэтому, хотя программное обеспечение для меня вообще не проблема, я иногда нахожу эти вопросы дизайна довольно мучительными. Что здесь происходит и как это исправить?

html css twitter-bootstrap printing-web-page

29.05.2019 10:16

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

607

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вам нужно будет написать CSS для печатных СМИ.

Вот базовый пример, основанный на вашем коде

@media print and (max-width: 767px) {
  .row{
    display: flex;
    flex-direction: row;
  }
  .col-md-3{
    flex-basis: 25%;
  }
  .col-md-1{
    flex-basis: 8.33%;
  }
  .col-md-8{
    flex-basis: 66.67%;
  }
  .col-md-6{
    flex-basis: 50%;
  }
}

<!DOCTYPE html>
<html lang = "en">
  <head>
    <meta charset = "utf-8">
    <meta http-equiv = "X-UA-Compatible" content = "IE=edge">
    <meta name = "viewport" content = "width=device-width, initial-scale=1">
    <!-- Bootstrap 4, from LayoutIt! -->
    <title>SPoE Testing</title>

    <meta name = "description" content = "Source code generated using layoutit.com">
    <meta name = "author" content = "LayoutIt!">

    <link href = "css/bootstrap.min.css" rel = "stylesheet">
    <link href = "css/style.css" rel = "stylesheet">

  </head>
  <body>
    <div class = "container-fluid">
    <div class = "row">
        <div class = "col-md-3">
        </div>
        <div class = "col-md-6">
            <div class = "page-header">
                <h1>
                    Integrated Next-Generation Test System
                </h1>
                <hr>
            </div>
        </div>
        <div class = "col-md-3">
        </div>
    </div>
    <div class = "row">
        <div class = "col-md-3">
        </div>
        <div class = "col-md-6">
            <div class = "page-header">
                <h2>
                    Single PoE <small>Unit 0000000 at 2019-05-23 23:59:59</small>
                </h2>
                <hr>
            </div>
            <div class = "row">
                <div class = "col-md-4">
                <h3>#0000000</h3>
                </div>
                <div class = "col-md-8">
                <h3>pass</h3>
                </div>
            </div>

            <div class = "row">
                <div class = "col-md-4">
                <h5>Step 1</h5>
                </div>
                <div class = "col-md-8">
                <h5>pass</h5>
                </div>
            </div>

            <div class = "row">
                <div class = "col-md-1"></div>
                <div class = "col-md-3">
                power
                </div>
                <div class = "col-md-8">
                28.1
                </div>
            </div>

            <div class = "row">
                <div class = "col-md-1"></div>
                <div class = "col-md-3">
                current
                </div>
                <div class = "col-md-8">
                525
                </div>
            </div>

            <div class = "row">
                <div class = "col-md-1"></div>
                <div class = "col-md-3">
                voltage
                </div>
                <div class = "col-md-8">
                53.7
                </div>
            </div>

        </div>
        <div class = "col-md-3">
        </div>
    </div>
</div>

    <script src = "js/jquery.min.js"></script>
    <script src = "js/bootstrap.min.js"></script>
    <script src = "js/scripts.js"></script>
  <style type = "text/css"> @page { size: auto } </style>
  </body>
</html>

29.05.2019 10:36

Другие вопросы по теме

Привязка прокрутки CSS с эффектом анимации

Как создать выпадающий список в вертикальной панели навигации?

Пробел между изображениями в карусели совы 2

Наведите курсор на кнопку, сохраняя при этом эффект наведения на элемент позади нее

Как сделать так, чтобы поле выбора материала Vue отображало параметр, когда значение по умолчанию пусто?

Удаление элемента из потока документов

Как стилизовать чипы PrimeNG?

.child-div переполняет .parent-div

Изменить цвет одиночного ли при наведении

Нижняя граница не расширяется на всю ширину под тегом (угловым)

Bootstrap теряет макет, печатающий портрет

Ответы 1

Другие вопросы по теме

Похожие вопросы