2017-01-03 1 views
0

Я пытаюсь использовать сетку строк/столбцов начальной загрузки на странице печати, однако, когда я перехожу к просмотру печати, все строки и столбцы отсутствуют. Я ссылаюсь this решения и иметь ссылку тег, показывающий в моем HTML правильно:Как использовать стили bootstrap на странице печати с пакетом Asp.net

<link href="/Content/bootstrap.css" rel="stylesheet" type="text/css" media="all"> 

Тем не менее, это показывает на экране:

enter image description here

И это показывает, на предварительном просмотре печати:

enter image description here

Как я могу получить мои стили бутстраповские показать на печать предварительного просмотра печатная страница?

ответ

1

Согласно this, Bootstrap 3 считает, что страница с бумагой имеет ширину менее 768 пикселей, поэтому отображается мобильная версия страницы. Вероятно, вы должны создать специальную таблицу стилей печати для распечатанного вида.

С другой стороны, вы должны быть в состоянии обойти эту проблему путем добавления Xs классов в сетку, как это:

<div class="row"> 
    <div class="col-lg-4 col-md-4 col-xs-4"> 
     <h1>First Name</h1> 
    </div> 
    <div class="col-lg-4 col-md-4 col-xs-4"> 
     <h1>Middle Initial</h1> 
    </div> 
    <div class="col-lg-4 col-md-4 col-xs-4"> 
     <h1>Last Name</h1> 
    </div> 
</div> 
<div class="row"> 
    <!-- Next row --> 
</div> 

Это не хорошая идея, хотя, потому что печатный вид отличается от небольших viewport, поэтому лучше создать отдельную таблицу стилей печати.

+0

Я создам отдельную таблицу стилей печати, однако было бы неплохо иметь возможность использовать макет сетки бутстрапа. Мне любопытно, есть ли альтернативы этому. –

Смежные вопросы