Подтвердить что ты не робот

Загрузочная сетка для печати

Я хотел бы создать страницу отчета с другим макетом для печати на мобильный. Я использую bootstrap v3. Кажется, что сетка не может различать эти две точки, поскольку точка останова для печати такая же, как точка останова для мобильного (xs)

Например: В нижеприведенной тестовой html моя напечатанная страница (или предварительный просмотр) показывает столбцы xs6 рядом друг с другом, но столбцы sm6 сложены. Между xs и sm не существует точки останова.

Конечно, моя печатная страница более широкая, чем мой мобильный вид, поэтому не следует использовать компоновку sm?

Я делаю что-то неправильно или так оно и есть? Существует ли определенная ширина окна просмотра для печати?

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <link rel="stylesheet" href="#" onclick="location.href='http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css'; return false;">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-6">
            xs6
            </div>
            <div class="col-xs-6">
            xs6
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
            sm6
            </div>
            <div class="col-sm-6">
            sm6
            </div>
        </div>       
    </div>
</body>
</html>
4b9b3361

ОТВЕТЫ

Ответ 1

Что я сделал, так это вручную воссоздать эти классы столбцов в моем CSS файле print.

.col-print-1 {width:8%;  float:left;}
.col-print-2 {width:16%; float:left;}
.col-print-3 {width:25%; float:left;}
.col-print-4 {width:33%; float:left;}
.col-print-5 {width:42%; float:left;}
.col-print-6 {width:50%; float:left;}
.col-print-7 {width:58%; float:left;}
.col-print-8 {width:66%; float:left;}
.col-print-9 {width:75%; float:left;}
.col-print-10{width:83%; float:left;}
.col-print-11{width:92%; float:left;}
.col-print-12{width:100%; float:left;}

Затем я просто использую эти классы, как я использую классы начальной загрузки, чтобы сделать мои столбцы только для печати. Я также создал .visible-print и .hidden-print, чтобы скрыть/показать элементы только в печатной версии.

По-прежнему нужна определенная работа, но этот быстрый патч мне очень помог.

Ответ 2

Если вы хотите, чтобы сетка Bootstrap не печаталась с помощью col-xs (мобильные настройки), и вы хотите использовать col-sm-?? вместо этого, исходя из ответа Fredy31, и вам даже не нужно определять col-print -??. просто перепишите все col-md-?? Определения класса css внутри: @media print {/* копировать и вставлять из bootstrap.css */} следующим образом:

@media print {
   .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
        float: left;
   }
   .col-sm-12 {
        width: 100%;
   }
   .col-sm-11 {
        width: 91.66666667%;
   }
   .col-sm-10 {
        width: 83.33333333%;
   }
   .col-sm-9 {
        width: 75%;
   }
   .col-sm-8 {
        width: 66.66666667%;
   }
   .col-sm-7 {
        width: 58.33333333%;
   }
   .col-sm-6 {
        width: 50%;
   }
   .col-sm-5 {
        width: 41.66666667%;
   }
   .col-sm-4 {
        width: 33.33333333%;
   }
   .col-sm-3 {
        width: 25%;
   }
   .col-sm-2 {
        width: 16.66666667%;
   }
   .col-sm-1 {
        width: 8.33333333%;
   }
}

Ответ 3

Версия Sass для Fredy31:

@for $i from 1 through 12 {
    .col-print-#{$i} {
        width: #{percentage(round($i*8.33)/100)};
        float: left;
    }
}

Ответ 4

Ваши стили переключения как это

<div class="row">
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

Увидеть

# grid-example-mixed или # grid-example-mixed-complete

и, возможно, вам нужно исправить

<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs"></div>

# грид-реагирующие возвращается в исходное состояние

Изменение: 04/2019

Начиная с Bootstrap 4.x появились новые классы, которые можно использовать для настройки поведения при печати. СМ. 4.3 Документы

Ответ 5

У меня была аналогичная проблема, для меня самым простым решением было вручную изменить ширину элементов, которые я хотел по-разному отображать при печати (и я добавил конкретный класс - в моем случае: title-container, details-container для этих, вдоль col-xs-6 и т.д.).

Например:

<div class="jumbotron">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-ms-3 col-sm-6 col-md-6 title-container">
            Some stuff
            </div>

            <div class="col-xs-12 col-ms-9 col-sm-6 col-md-6 details-container">
            Some more stuff
            </div>
        </div>
    </div>
</div>

@media print {
    .title-container {
        width: 360px;
        float: left;
    }

    .details-container {
        width: 300px;
        float: right;
    }
}

В моем случае мне нужен столбец, который будет плавать справа, один влево, таким образом, поплавки... Вы можете установить в своей пользовательской css ширину также для .col-xs-6 и т.д. Просто быстрое и грязное решение, но выполнило задание на странице, где мне это нужно...

Ответ 6

Следующее прекрасно работает для создания элементов сетки, характерных для печатных носителей. Использование Bootstrap 3.

@media print {
    .make-grid(print);
}

Затем вы можете использовать все элементы таблицы сетки с ключевым словом print. Пример: col-print-6 col-print-offset-2 и т.д.

Ответ 7

Может быть, вы можете использовать Bootstrap 2. Если вы знакомы с Bootstrap 2, вы можете использовать его в качестве альтернативы, так как это предлагает невосприимчивый CSS. Bootstrap 2 не был мобильным первым, вам пришлось добавить дополнительную таблицу стилей, чтобы сделать ваши веб-страницы отзывчивыми.

Или вы можете добавить clearfix для мобильной части. См. http://getbootstrap.com/css/#grid-responsive-resets

Ответ 8

И SASS-версия Ehsan Abidi отвечает на использование ответа MiCc83:

  @for $i from 1 through 12 {
      .col-sm-#{$i} {
          width: #{percentage(round($i*8.33)/100)};
          float: left;
      }
  }

Я предпочитаю это, потому что я всегда специфицирую размер "см" и наиболее близко приближаюсь к странице печати в моих приложениях. Тогда мне нужно только добавить что-то специально для печати, когда у меня есть условие исключения.

Ответ 9

Для Bootstrap 4 (с использованием SASS)

@each $breakpoint in map-keys($grid-breakpoints) {
    @include media-breakpoint-up($breakpoint) {
        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

        @for $i from 1 through $grid-columns {

            @media print {
                .col-print#{$infix}-#{$i} {
                    @include make-col($i, $grid-columns);
                }
            }
        }
    }
}

создаст


@media print {
  .col-print-1 {
    flex: 0 0 8.33333%;
    max-width: 8.33333%; } }

@media print {
  .col-print-2 {
    flex: 0 0 16.66667%;
    max-width: 16.66667%; } }

@media print {
  .col-print-3 {
    flex: 0 0 25%;
    max-width: 25%; } }

@media print {
  .col-print-4 {
    flex: 0 0 33.33333%;
    max-width: 33.33333%; } }

@media print {
  .col-print-5 {
    flex: 0 0 41.66667%;
    max-width: 41.66667%; } }

@media print {
  .col-print-6 {
    flex: 0 0 50%;
    max-width: 50%; } }

@media print {
  .col-print-7 {
    flex: 0 0 58.33333%;
    max-width: 58.33333%; } }

@media print {
  .col-print-8 {
    flex: 0 0 66.66667%;
    max-width: 66.66667%; } }

@media print {
  .col-print-9 {
    flex: 0 0 75%;
    max-width: 75%; } }

@media print {
  .col-print-10 {
    flex: 0 0 83.33333%;
    max-width: 83.33333%; } }

@media print {
  .col-print-11 {
    flex: 0 0 91.66667%;
    max-width: 91.66667%; } }

@media print {
  .col-print-12 {
    flex: 0 0 100%;
    max-width: 100%; } }

Ответ 10

Если у вас есть только 2 столбца, вы можете попробовать это. Я исправил это с помощью кода ниже.

<div class="row">
    <div class="w-50 p-3 float-left">            
    </div>
    <div class="w-50 p-3 float-right">
    </div>
</div>