如何在橫向模式下

引導打印時，取出左側立柱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

如何在橫向模式下

回答

相關問題