如何在打印页面时将Bootstrap 3列扩展为整个页面宽度？ [英] How can I expand a Bootstrap 3 column to be the full page width when the page is printed?

问题描述

当我的应用程序中的页面打印时，我想隐藏侧边导航，并将主要内容的宽度扩展为完整的12列（我使用Bootstrap 3）。

这是目前的html / css。

 < div class =row> 
< div class =col-md-3 side-navigation hidden-print> 
 ... 
< / div> 
< div class =col-md-9> 
 ... 
< / div> 
< / div> 
 

当打印第二列宽度时，Bootstrap惯用的方法是什么？

解决方案

在Bootstrap中没有帮助类。
当你想完成这样的事情，你可以隐藏div的css或
设置第二个div的类与Javascript和更改从col-md-9到col-md-12。 / p>


When a page in my application is printed, I'd like to hide the side navigation and expand the width of the main content to be a full 12 columns (I'm using Bootstrap 3).

Here's the current html/css.

<div class="row">
  <div class="col-md-3 side-navigation hidden-print">
    ...
  </div>
  <div class="col-md-9">
    ...
  </div>
</div>

What's the Bootstrap idiomatic way to expand the second column's width when printed?

解决方案

There are no helper classes in Bootstrap to do this. When you want to accomplish such a thing, you can hide div's with css or set the class of the second div with Javascript and change it from col-md-9 to col-md-12.

这篇关于如何在打印页面时将Bootstrap 3列扩展为整个页面宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！