正确打印Twitter Bootstrap [英] Printing Twitter Bootstrap correctly

问题描述

我真的很努力打印我的Twitter Bootstrap视图正确，并想知道是否有人可以指出我的方向正确。我添加了一个自定义的print.css，它覆盖了一些原来的bootstrap样式，以及样式的一些自己的组件。

这是我的打印对话框：

不知道如果你能从图像中很容易地告诉这个，但是井已经失去了它的背景，以及没有跨越整个页面宽度。此外，列或跨度似乎都很。。。页面建立如下：（只显示第一行以保持其清晰）

 < div class = > 
< div class =row-fluid> 
< div class =span3> 
< div class =row-fluid> 
< div style =height：150px; width：300px> 
< img class =img-roundedsrc ='data：image / png; base64，@ Model.Unit.Image64'/> 
< / div> 
< / div> 
 
< div class =row-fluid> 
 ... 
< / div> 
 
< / div> 
< div class =span4> 
 ...饼图控件
< / div> 
< div class =span5> 
 ...条形图控制
< / div> 
 
< / div> 
< / div> 
  

这是我的print.css：

  @media print {
 body {
 margin：0; 
 padding：0; 
 line-height：1.4em; 
 word-spacing：1px; 
 letter-spacing：0.2px; 
 font：13px Arial，Helvetica，Lucida Grande，serif; 
 color：＃000; 
} 
 
＃print-btn＃update-btn＃nav-left＃nav-bar，#selectUnitContainer，.navbar，.sidebar-nav {
 display：none; 
} 
 
＃print-btn，＃update-btn，#units {
 display：none; 
} 
 
＃nav-left {
 display：none; 
} 
 
＃report-container {
 visibility：visible; 
} 
 
 .well .span12 {
 width：100％; 
 visibility：visible; 
} 
 
 .navbar {
 display：none; 
} 
 
 .sidebar-nav {
 display：none; 
} 
} 
  

解决方案

，Bootstrap.css附带了预定义的打印样式，例如：

  / ** 
 *用于切换打印内容。 
 ** / 
 .visible-print {
 display：block！important; 
} 
 
 .hidden-print {
 display：none！important; 
} 
  

其次，您可以使用 page-break css规则将图表分隔到不同的页面上，

  / ** 
 * Chrome需要页面内部似乎
 *。 
 ** / 
 div.somechart {
 page-break-after：always; 
 page-break-inside：avoid; 
} 
  

最后，使用格式化测试以占用打印屏幕上的全宽 ，而不是依赖于 span3 / col- * - 3 '和 span4 / col - * - 4 考虑到以下情况时，系统会以某种方式正确执行 ：





• 系统打印页边距


• Bootstrap的@print定义页边距


• 页面gutters


• ul>
  
  

  最后，最后一个小的东西有助于注意（是的，尽管自定义 @print style！）：

   < link href =/ assets / css / bootstrap.min.css =stylesheet media =screen/> 
    

  到：

   code>< link href =/ assets / css / bootstrap.min.css =stylesheetmedia =all/> 
    

  
  

  I'm really struggeling to print my Twitter Bootstrap views correctly, and was wondering if anyone could point me in the right direction. I've added a custom "print.css" which overrides some of the original bootstrap styling, as well of styling some of my own components.

  This is my print dialog:

  Not sure if you can tell so easily from the image, but the well has lost its background as well as not spanning across the entire page width. Also, the 'columns' or 'spans' seem to be all wonky. Page is built up like this: (Only showing first row to keep it clean)

  <div class="container-fluid">
      <div class="row-fluid">
          <div class="span3">
              <div class="row-fluid">
                  <div style="height: 150px; width: 300px">
                      <img class="img-rounded" src='data:image/png;base64,@Model.Unit.Image64' />
                  </div>
              </div>
  
              <div class="row-fluid">
                  ...
              </div>
  
          </div>
          <div class="span4">
              ...Pie chart control
          </div>
          <div class="span5">
              ...Bar chart control
          </div>
  
      </div>
  </div>
  

  Here's my print.css:

  @media print {
      body {
          margin: 0;
          padding: 0;
          line-height: 1.4em;
          word-spacing: 1px;
          letter-spacing: 0.2px;
          font: 13px Arial, Helvetica,"Lucida Grande", serif;
          color: #000;
      }
  
      #print-btn #update-btn #nav-left #nav-bar, #selectUnitContainer, .navbar, .sidebar-nav {
          display: none;
      }
  
      #print-btn, #update-btn, #units {
          display: none;
      }
  
      #nav-left {
          display: none;
      }
  
      #report-container {
          visibility: visible;
      }
  
      .well .span12{
          width: 100%;
          visibility: visible;
      }
  
      .navbar {
          display: none;
      }
  
      .sidebar-nav {
          display: none;
      }
  }
  

  解决方案

  Firstly, Bootstrap.css does come with pre-defined print styles such as:

  /** 
   *  Use these for toggling content for print.
  **/
  .visible-print {
      display: block !important;
  }
  
  .hidden-print {
      display: none !important;
  }
  

  Secondly, you can test with page-break css rule to separate the charts onto different pages for cleaner formatting.

  /** 
   *  Page-break-inside seems to
   *  be required for Chrome.
  **/
  div.somechart { 
     page-break-after: always; 
     page-break-inside: avoid;
  }
  

  Lastly, test with formatting with the rows to take up the full width on print screen rather than relying on percentages of the span3/col-*-3's and span4/col-*-4's, because it would seem they are behaving correctly in some way when you take into account:

  • Sytem printing page margins
  • Bootstrap's @print defined margins
  • Page gutters
  • span percentages at print screen.

  Finally, the last small thing that's helpful to note (Yes, despite the custom @print style!):

  <link href="/assets/css/bootstrap.min.css" rel="stylesheet" media="screen" />
  

  to:

  <link href="/assets/css/bootstrap.min.css" rel="stylesheet" media="all" />
  

  这篇关于正确打印Twitter Bootstrap的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！