Câu hỏi Lưới khởi động để in


Tôi muốn thiết kế trang báo cáo với bố cục khác nhau để in sang thiết bị di động. Tôi đang sử dụng bootstrap v3. Có vẻ như lưới không thể phân biệt được giữa hai điểm làm điểm ngắt cho việc in giống như điểm ngắt cho thiết bị di động (xs)

Ví dụ: Trong html thử nghiệm dưới đây trang in của tôi (hoặc xem trước bản in) hiển thị các cột xs6 cạnh nhau nhưng các cột sm6 được xếp chồng lên nhau. Không có điểm ngắt giữa x và sm.

Chắc chắn trang in của tôi rộng hơn khung nhìn di động của tôi vì vậy không nên sử dụng bố cục sm?

Tôi đang làm điều gì đó sai hay đây là cách nó? Có chiều rộng khung nhìn được xác định để in không?

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</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>

28
2018-03-05 13:39


gốc


câu hỏi này stackoverflow.com/questions/320357/… điểm đến thực tế, khung nhìn in (A4) là 670px, đó là vấn đề của tôi. Có một xung đột giữa trang in của tôi và kiểu di động của tôi khi cả hai đều có cùng kích thước khung nhìn. - Gordon Copestake


Các câu trả lời:


Những gì tôi đã làm là để tự tạo lại các cột lớp trong css in của tôi.

.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;}

Sau đó, tôi chỉ sử dụng những lớp như tôi sử dụng các lớp bootstrap để làm cho các cột của tôi chỉ in. Tôi cũng đã tạo .visible-print và .hidden-print để ẩn / chỉ hiển thị các phần tử trong phiên bản in.

Nó vẫn cần một số công việc, nhưng bản vá nhanh đó đã giúp tôi rất nhiều.


43
2018-01-26 14:42





Nếu bạn muốn lưới của Bootstrap không in bằng col-xs (thiết lập di động), và muốn dùng col-sm- ?? thay vào đó, dựa trên Fredy31 câu trả lời và bạn thậm chí không cần phải xác định col-print - ??. chỉ cần viết lại tất cả col-md- ?? định nghĩa lớp css bên trong một: @media print {/ * copy và dán từ bootstrap.css * /} như sau:

@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%;
   }
}

29
2018-04-02 06:51



Xin chào, Bạn thêm chính xác dữ liệu in @media này ở đâu. Trong biểu định kiểu print.css? - eduardo92
Xin chào, trong tệp css tùy chỉnh của tôi có cài đặt của riêng tôi cho nhiều trang. - Ehsan Abidi


Phiên bản Sass của giải pháp Fredy31:

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

18
2017-09-14 12:30



Chính xác những gì tôi đang tìm kiếm! - MFrazier
Làm thế nào để sử dụng nó . . - Muhammad Waqas Aziz


Tôi đã có một vấn đề tương tự, đối với tôi giải pháp dễ nhất là sửa đổi chiều rộng theo cách thủ công cho các phần tử tôi muốn xuất hiện khác nhau khi được in (và tôi đã thêm một lớp cụ thể trong trường hợp của tôi: title-container, chi tiết-container cho những người, dọc theo col-xs-6, vv).

Ví dụ:

<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;
    }
}

Trong trường hợp của tôi, tôi cần một cột được thả ở bên phải, một bên trái, do đó nổi ... Bạn có thể đặt trong css tùy chỉnh của bạn chiều rộng cũng cho .col-xs-6 vv chỉ là một giải pháp nhanh chóng và dơ bẩn, nhưng đã làm công việc cho một trang mà tôi cần ...


3
2017-10-06 11:59



Giải pháp tốt nhất tôi đã nhìn thấy, mặc dù vẫn không lý tưởng! - Gordon Copestake
Có, tôi chỉ làm một cái gì đó tương tự. Tôi biết nó là hackish nhưng tôi đã có một điều col-xs-2 / col-xs-10 đi. Tôi đã tạo một lớp trong @media print {.hide_element_for_print {display: none} và được sử dụng khi cần (Giống như col-xs-2) và thay đổi định nghĩa cho .col-xs-10 {width: 100%}. Điều này cho phép tôi ẩn nav bên trái và in chiều rộng toàn bộ vùng nội dung chính. - Robbie Smith


Các kiểu chuyển đổi của bạn như thế này

<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>

Xem

# grid-example-mixed hoặc là # grid-example-mixed-complete

và có thể bạn cần xóa

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

# grid-responsive-reset


3
2018-03-05 13:42



Đúng vậy, nhưng phiên bản in của tôi luôn sử dụng kiểu xs, kiểu này làm phong cách di động của tôi - Gordon Copestake
nhưng trong bài viết của bạn, bạn có hai hàng với lưới khác nhau, nhưng nếu bạn muốn có nó đáp ứng bạn phải cung cấp cho hàng tất cả các loại bạn cần :) - Dwza
Có lẽ tôi đã đưa ra một ví dụ xấu. Tôi đang cố gắng đảm bảo rằng trang in của tôi sử dụng một kiểu khác với phiên bản di động của tôi. Cả hai dường như muốn sử dụng phiên bản col-xs- # - Gordon Copestake
bạn đã cố gắng để clearfix? - Dwza
Đó không phải là vấn đề. Hãy để tôi cố gắng giải thích: Nếu tôi có hai cột cạnh nhau, tôi muốn họ in cạnh nhau nhưng được hiển thị xếp chồng lên nhau trên thiết bị di động. Tôi có thể buộc hai cột in với col-xs-6 nhưng điều đó cũng buộc chúng cạnh nhau trong điện thoại di động có nghĩa là chúng chồng lên nhau. Nếu tôi buộc chúng xếp chồng lên nhau trên thiết bị di động với col-xs-12, chúng cũng được in xếp chồng lên nhau mặc dù có đủ chỗ cho chúng cạnh nhau. col-sm- * không có hiệu lực vì khung nhìn quá nhỏ để nó có hiệu lực. - Gordon Copestake


Các công trình sau đây rất tuyệt vời để tạo các phần tử lưới cụ thể cho phương tiện in. Sử dụng Bootstrap 3.

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

Sau đó, bạn có thể sử dụng tất cả các phần tử col lưới với print từ khóa. Ví dụ: col-print-6  col-print-offset-2, v.v.


2
2018-01-16 21:32





Có lẽ bạn có thể sử dụng Bootstrap 2. Nếu bạn đã quen thuộc với Bootstrap 2, thì bạn có thể sử dụng nó như là một thay thế, vì điều này cung cấp CSS không đáp ứng. Bootstrap 2 không phải là thiết bị di động đầu tiên, bạn phải thêm một bảng định kiểu phụ để làm cho các trang web của bạn được đáp ứng.

Hoặc bạn có thể thêm clearfixes cho phần di động. Xem http://getbootstrap.com/css/#grid-responsive-resets


1
2017-09-19 02:50



Trong khi BS2 có thể là một giải pháp tôi thà mong đợi hơn là trở lại - Gordon Copestake


Và phiên bản SASS của câu trả lời của Ehsan Abidi bằng câu trả lời của MiCc83:

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

Tôi thích điều này bởi vì tôi luôn luôn chỉ định kích cỡ "sm" và gần giống nhất một trang in trong các ứng dụng của tôi. Sau đó, tôi chỉ cần thêm một cái gì đó đặc biệt cho in ấn khi tôi đã có một điều kiện ngoại lệ.


1
2017-08-07 19:22