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打印，则只有两个产品图片列，左侧会显示空白区域。

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

更新

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

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

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

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

Answer 1

您可以创建一个特殊类，以便在打印期间使列更宽。

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

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

1 个答案: