在横向模式下打印时如何删除左栏

Question

Bootstrap 3 购物车左侧为产品树，右侧为产品图片：

<body>
    <div class="container">
       <section class="row">
        <!--  Left column: product tree -->
         <div class="col-lg-3 col-md-4 col-sm-5">
            <div id="LeftPane" class="site-leftpane custom-collapse">
               <button class="collapse-toggle visible-xs" type="button" data-toggle="collapse" data-parent="custom-collapse" data-target="#side-menu-collapse">
                            <span class="">Tootepuu</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>

                        <ul class='tree list-group collapse' id="side-menu-collapse">


<li>
    <a href="/Store/Category?category=1">Product tree item 1</a>
</li>

<li>
    <a href="/Store/Category?category=1">Product tree item 2</a>
</li>
...
  </div>
  </div>
  </div>

<!--  right column: product images -->
<div class="col-lg-9 col-md-8 col-sm-7">
                <div class="site-maincolumn">
             ...

如果在横向模式下从 Chrome 打印，只有两个产品图像列，并且左侧会出现空白 space。

如何去掉左边空白的space，让产品图片出现在这个区域？如果使用纵向打印，一切正常：出现四个产品图像列，并且没有空白 space.

更新

根据 pbenard 评论，我将 hidden-print class 添加到左栏

            <div class="col-lg-3 col-md-4 col-sm-5 hidden-print">

这只会使两个图像列居中。

如何在横向模式下打印更多图像列？

Answer 1

您可以创建一个特殊的 class 以在打印期间使列变宽。

例如：http://glebkema.ru/tasks/so-38413455.html

@media print {
  .col-print-12 {
    width: 100% !important;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-lg-3 col-md-4 col-sm-5 hidden-print">
      <img src="//placehold.it/450x450/c69/f9c/?text=Left" width="100%" alt="">
    </div>
    <div class="col-lg-9 col-md-8 col-sm-7 col-print-12">
      <img src="//placehold.it/900x300/69c/9cf/?text=Right" width="100%" alt="">
    </div>
  </div>
</div>

在横向模式下打印时如何删除左栏

How to remove left column when printing in landscape mode

css

html

twitter-bootstrap

printing-web-page