无法打印并排表侧（水平）

Question

我试图通过端使用自举这样

但是当我尝试打印预览，我得到这个 打印的表侧我代码如下。我尝试了所有可能的解决方案，但我不知道为什么我无法打印我所看到的页面。请指导我解决这个问题。

<style> 
.print-wrapper{padding-top:25px;width:768px;margin:0 auto;}. 
print .active{font-weight:bold;height:50px;background-color:lightgray;} 
</style> 
<div class="container"> 
<div class="print-wrapper well well-lg clearfix"> 
<div class="col-md-5"> 
<div class="col-md-12 border-design"> 
<table align="left" border="1" bordercolor="#CCC" class="table table-condensed print"> 
<tbody> 
<tr class="active"> 
<td style="text-align:center">#</td> 
<td>Name</td> 
</tr> 
<tr> 
<td>Item 1</td> 
<td></td> 
</tr>   
<tr> 
<td>Item 2</td> 
<td></td> 
</tr> 
<tr> 
<td>Item 3</td> 
<td></td> 
</tr> 
<tr> 
<td>Item 4</td> 
<td></td> 
</tr> 
<tr> 
<td>Item 5</td> 
<td></td> 
</tr> 
<tr> 
</tbody> 
</table>  
<p style="text-align:justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut felis non sem vulputate congue. Integer enim mauris, malesuada eu posuere non, semper a ex. Duis at urna id urna egestas ultricies sit amet nec eros. Maecenas in risus ex. Curabitur iaculis quam arcu, vitae pretium massa lacinia vel. Aenean vel rutrum odio. Nulla purus ante, eleifend ut congue non, ornare at nisi. Sed viverra maximus sapien, non condimentum augue blandit finibus. </p> 
</div> 
</div> 
<div class="col-md-7"> 
<div class="col-md-12 border-design"> 
<table align="left" border="1" bordercolor="#CCC" class="table table-condensed print"> 
<tbody> 
<tr class="active"> 
<td colspan="2" style="text-align:center">Customer</td> 
</tr> 
<tr> 
<td width="25%">Name</td> 
<td> </td> 
</tr>   
<tr> 
<td>Address</td> 
<td></td> 
</tr> 
<tr> 
<td>DOB</td> 
<td></td> 
</tr> 
<tr> 
<td>Mobile No</td> 
<td></td> 
</tr> 
<tr> 
<td>Email</td> 
<td></td> 
</tr> 
</tbody> 
</table> 
<table align="left" border="1" bordercolor="#CCC" class="table table-condensed print"> 
<tbody> 
<tr class="active"> 
<td colspan="2" style="text-align:center">Customer</td> 
</tr> 
<tr> 
<td width="25%">Name</td> 
<td></td> 
</tr>   
<tr> 
<td>Address</td> 
<td></td> 
</tr> 
<tr> 
<td>DOB</td> 
<td></td> 
</tr> 
<tr> 
<td>Mobile No</td> 
<td></td> 
</tr> 
<tr> 
<td>Email</td> 
<td></td> 
</tr> 
</tbody> 
</table> 
</div> 
</div> 
</div> 
</div> 

Answer 1

你会想是这样的：

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-6"> 
     table 1 html 
     </div> 
     <div class="col-md-6"> 
     table 2 html 
     </div> 
    </div> 

    <div class="row"> 
     <div class="col-md-6"> 
     text html 
     </div> 
     <div class="col-md-6"> 
     table 3 html 
     </div> 
    </div> 
</div> 

正如你可以看到有两个单独的行。每行默认总共有12列。

因此，您有表1占用6/12列，表2占用其他6/12列。如果表格1 +表格2> 12的列的总和，则表格2将被移动到第二行。

第二行与第一行完全相同，唯一不同的是div的内容。

另请注意，由于您使用的是col-md，因此任何小于md的显示都将使每个表占用全部12列。