如何用css&打印我的页面引导样式

时间:2016-06-07 15:37:21

标签: html css twitter-bootstrap-3

我正在尝试用我的CSS和boostrap样式打印我的网站。我用 ctrl + p 或用window.print()函数打印;我尝试在我的打印函数media="print"和其他东西中包含CSS引用,但是我无法使用CSS样式打印页面,而boostrap样式只显示没有颜色的div,control和buttons边框。

我的css示例

    body{
    background-color:gainsboro;
    }

    .wrapper {    
    margin-top: 80px;
    margin-bottom: 20px;
    }

    .form-signin {
    max-width: 420px;
    padding: 30px 38px 66px;
    margin: 0 auto;
    background-color: #eee;
    border: 3px dotted rgba(0,0,0,0.1);  
    }

    .form-signin-heading {
    text-align:center;
    margin-bottom: 30px;
    }

   .form-control {
    position: relative;
    font-size: 16px;
    height: auto;
    padding: 10px;
    }

Print preview vs original page

1 个答案:

答案 0 :(得分:0)

我上周正在研究这个问题,遗憾的是我并没有完全按照Bootstrap样式进行打印。在你的CSS添加

@media print {
  p.class-name {
  color: red !important;
  -webkit-print-color-adjust: exact; 

  }
}

在@media打印内容中,列出了元素应如何对打印做出反应

例如

#breadcrumbs {
  display: none;
}

将阻止我的带有ID痕迹的元素显示在打印页面上。