php - 打印 CSS、Bootstrap 和 PHP

Question

这与我的上一个问题半相关，但我已经设置了一个 filemaker foreach 循环来输出一组图像以伴随名称和 ID，以及一个复选框。

检查相关图像后转到另一页打印，无论我如何尝试我都无法让元素适合一页？ 我使用了内联样式、Print css 样式表以及与 chrome 检查器的所有可能组合。

我可以让它适合，一旦图像名称被拿走，但我需要包括在内。

include('head.php');
if (isset($_POST['img'])) {

$img = $_POST['img'];

} else {
$img = '';
echo 'error';
}

?>
<div class="container">
<div class="row" >
<?

foreach ($img as $image){

//echo '<div class="col-md-5">';
echo '<img class="" style="margin:20px 10px 10px 0px; width:45%;" src="Invoices/Photos/RC_Data_FMS/Invoices_db/Photos/'.$image.'">';
echo '<p class="centered" style="width:45%;">'.$image.'</p>';
//echo '</div>';

} 
?>
</div>
</div>

基本上，我正在尝试实现 A4 肖像，其中包含 6 张图像的网格，标签和下方的标签之间有边距。

我尝试将所有内容都推送到 col-md-6 中div，取<p>标签，但这没有帮助。

我也试过使用 px 而不是 %，只是想不通这个。

上一页的代码；

echo '<input type="checkbox" class="form-control check" id="img" name="img[]" value="'.$pic.'">';

$pic 变量是图像名称。

Answer 1

我认为您可以通过调整 @media print 中的 img 高度来实现您想要的效果，如下所示:

@media print{
  img{max-height:280px} //tweak this until you're happy

}

此外，不要忘记 img-responsive Bootstrap 类 - 它会产生奇迹:)

<div class="col-xs-6"> <!-- this will limit img width if img-responsive used too-->
  <img class="img-responsive" src="image.jpg">
  <p>Filename 1</p>
</div>

您也可以放弃大部分内联样式，一开始坚持使用 bootstrap 的默认设置，然后在确实需要时进行调整。

http://www.bootply.com/YZkHOq0C1i