Rotativa и Bootstrap Grid Styling

Я работаю над проектом ASP.NET MVC 5 и использую Rotativa для создания PDF-документов из представлений Razor.

Я не могу заставить Rotativa правильно визуализировать вид, используя стили Bootstrap. Я пытаюсь стилизовать вид, используя простую компоновку сетки, которую Bootstrap делает так хорошо. Ничего особенного.

Вот скриншот моего Razor View:Razor View

Вот снимок экрана PDF:Сгенерированный PDF

И вот содержание моего взгляда:

@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>

    <div class="container">
        <h1>Hello World!</h1>
        <p>Resize the browser window to see the effect.</p>
        <div class="row">
            <div class="col-sm-6" style="background-color:lavender;">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                <p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
            <div class="col-sm-6" style="background-color:lavenderblush;">
                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
            </div>
        </div>
    </div>

</body>
</html>

Кто-нибудь еще смог заставить это работать?

Источник

5 ответов

Решение

У меня была такая же проблема. Попробуйте использовать col-xs-# вместо col-md-# / col-sm-#, что прекрасно работает для меня.

Источник

Вы должны установить правильный размер страницы и позаботиться о разрешении и точках останова Bootstrap при уменьшении окна браузера.

На скриншоте я вижу, что вы получаете мобильный вывод при конвертации в PDF; это означает, что Bootstrap обнаружил небольшой размер страницы и соответствующим образом корректирует стиль. Я думаю, что по умолчанию размер страницы Rotativa - A4.

Источник

Я нашел здесь обходной путь. После html

<div class="row printDetails">
   <div class="col-5" style="background-color:lavender;">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
   </div>
   <div class="col-6" style="background-color:lavenderblush;">
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
   </div>
</div>

вы должны создать класс css для отображения встроенного блока. Итак, в вашем случае:

.printDetails > div {
   display: inline-block;
}

Также обратите внимание, что количество строк составляет 5 и 6 или 5 и 5 в зависимости от размера страницы, часть ширины идет на размер поля pdf, что странно, потому что он не получает точного размера, как мобильная версия, которая использует Rotativa.

Надеюсь, это кому-то поможет.

Обновить

Как ответил @Erdogan, и, проверив его ссылку, я протестировал код, который, по его мнению, мне, вероятно, нужно проверить... Здесь я ссылаюсь на код:

просто добавил класс CSS на том же уровне, что и uk-grid, под названием "flexrow" и еще один для моих div.

.flexrow {
   display: -webkit-box;
   display: -webkit-flex;
   display: flex !important;
}         
.flexrow > div {             
   -webkit-box-flex: 1;             
   -webkit-flex: 1;             
   flex: 1;         
}

Получил: Здесь в некоторых комментариях

Источник

Для начальной загрузки 3 сделайте следующее:

<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
     another tags ...
</div>

Для начальной загрузки 4 сделайте следующее:

    <div class="col-6 col-sm-6 col-md-6 col-lg-6">
         another tags ...
    </div>
Источник

Для bootstrap4 добавьте следующие стили

      .flexrow {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex !important;
    }
.flexrow > div {
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            flex: 1;
        }

Затем добавьте flexrow рядом с каждым классом строк в HTML.

      <div class="row flexrow"> </div>

Благодаря ссылке

Источник
Другие вопросы по тегам