如何在横向模式下

引导打印时，取出左侧立柱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中在横向模式下打印，只有两种产品图像列和空白空间出现在左侧。

如何删除左侧的空白区域以使产品图像显示在此区域中？如果使用纵向方向打印，则一切正常：出现四个产品图像列，且没有空白区域。

更新

根据pbenard评论我添加hidden-print类左列

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

这不仅使为中心的两个图像列。

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

来源

2016-07-16 Andrus

即使有这种类：http://getbootstrap.com/css/#responsive-utilities-print你有问题？ – pbenard

@pbenard。我添加了'hidden-print'类，但仍然只有2个图像列出现。如何在横向模式下打印更多图像列。我更新了问题 – Andrus

您可以创建一个特殊的类，使打印过程中色谱柱变宽。

例如：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>

来源

2016-07-16 18:18:41

如何在横向模式下

回答

相关问题