ASP.Net Core 5 打印 Div 垂直对齐问题

Question

我尝试了各种对齐设置，但没有任何效果。请查看下图中最右侧的一列，注意与左侧的列相比价格向下移动。

请注意，这是打印预览

这与 table 在未打印时在网页上的显示效果相同。

你可以看到在网页中，我将最后一列的边距设置为mt-0。

这是我的代码：

<div class="row">
    <div class="col-4">        
        <button class="btn btn-primary" onclick="printDiv()">Print</button>
    </div>
</div>

<div class="row" id="PrintDiv">
    <div class="col-md-8 offset-2">
        <div class="row d-flex">
            <div class="col-8">
                <p>
                    <h2>@ViewBag.FullName</h2>
                    <h4>Order History</h4>
                </p>
            </div>
            <div class="col me-1">
                <img src="@(Configuration.GetValue<string>("StorageContainerURL"))/store-logo.png" )
                     class="img-fluid " style="max-height:75px;width:auto" alt="Alternate Text" />
            </div>
        </div>
        
        <table class="table">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Order ID</th>
                    <th>Items</th>
                    <th>Total</th>                    
                </tr>
            </thead>
            <tbody>
                @foreach (var order in Model)
                {
                    <tr>
                        <td class="align-middle">@order.OrderDate.ToLocalTime().ToShortDateString()</td>
                        <td class="align-middle">@order.Id</td>
                        <td class="align-middle">
                            <ul style="list-style-type:none">
                                @foreach (var item in order.OrderItems)
                                {
                                    <li>
                                        <div class="alert alert-info" role="alert">
                                            <span class="badge bg-success">@item.Amount</span> [@item.Price.ToString("c")] - @item.Product.Name
                                        </div>
                                    </li>
                                }
                            </ul>
                        </td>
                        <td class="mt-0">@order.OrderItems.Select(m => m.Product.Price * m.Amount).Sum().ToString("c")</td>
                        
                    </tr>
                }
            </tbody>
        </table>

    </div>
</div>

@section Scripts{ 

    <script type="text/javascript">

        function printDiv() {
            var divContents = document.getElementById("PrintDiv").innerHTML;
            var a = window.open('', '', 'height=500, width=500');
            a.document.write('<html>');
            a.document.write('<body > <br>');
            a.document.write(divContents);
            a.document.write('</body></html>');
            a.document.close();
            a.print();
        }
    </script>

}

有没有人有任何建议可以使 Total 列与其他列正确对齐？

Answer 1

我发布问题后不久就发现了问题。我意识到页面的打印版本无法识别 Bootstrap 类。因此，我将所有列更改为使用 inline styles 进行对齐。

<tbody>
    @foreach (var order in Model)
    {
        <tr>
            <td style="vertical-align:text-top">@order.OrderDate.ToLocalTime().ToShortDateString()</td>
            <td style="vertical-align:text-top">@order.Id</td>
            <td style="vertical-align:text-top">
                <ul style="list-style-type:none">
                    @foreach (var item in order.OrderItems)
                    {
                        <li>
                            <div class="alert alert-info" role="alert">
                                <span class="badge bg-success">@item.Amount</span> [@item.Price.ToString("c")] - @item.Product.Name
                            </div>
                        </li>
                    }
                </ul>
            </td>
            <td style="vertical-align:text-top">@order.OrderItems.Select(m => m.Product.Price * m.Amount).Sum().ToString("c")</td>
            
        </tr>
    }
</tbody>

ASP.Net Core 5 打印 Div 垂直对齐问题

ASP.Net Core 5 Print Div Vertical Alignment Problem

printing

asp.net-core

bootstrap-4