打印CSS，Bootstrap和PHP

這與我最後一個問題有半相關性，但我已經設置了一個filemaker foreach循環來輸出一組圖像以伴隨名稱和ID以及複選框。打印CSS，Bootstrap和PHP

一旦檢查有關圖像到另一個網頁打印，無論我多麼努力，我不能讓元素以適應一個頁面？我已經使用內聯樣式，一個打印CSS樣式表，所有可能的組合與鉻檢查器。

一旦圖像名稱被拿走，我可以使它適合，但我需要這個。

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格中，將<p>標籤帶走，但這並沒有幫助。

我也嘗試使用px反對％，只是不能找出這一個。

上一頁的代碼;

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

使用$ pic變量作爲圖像名稱。

來源

2015-08-27 Jamie Oliver

你說你要6個圖像的網格......是三高2寬？ –

我認爲這真的歸結於你的圖像是如何形成的，而不是多寬。你可以用@media打印樣式來調整它們的高度 –

我覺得你可以在@media print達到你想要的東西通過調整IMG的高度，就像這樣：

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

}

另外，不要忘了img-responsive引導類 - 它可以創造奇蹟:)

<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>

您可能也可以放棄大部分內聯樣式，並首先使用引導程序的默認值，然後如果您確實需要調整。

http://www.bootply.com/YZkHOq0C1i

來源

2015-08-27 06:08:10

工作過一次，id一直試圖通過寬度來操作它們以適合頁面，但高度立即對問題進行排序，謝謝！：） –

打印CSS，Bootstrap和PHP

回答

相關問題