Laravel -可邮寄中的包含表

Question

我正在发送订单确认和简历...我需要在电子邮件中显示此表，但引导程序在mail.blade文件中不起作用……

<div class="container">
<div class="row ">
    <div class="table-responsive w-100">
        <div class="d-table w-100">
            <div class="d-table-row">
                <div class="d-table-cell p-2 pl-5 pr-5 border border-dark text-center">Licence type</div>
                <div class="d-table-cell p-2 pl-5 pr-5 border border-dark text-center">Price</div>
                <div class="d-table-cell p-2 pl-5 pr-5 border border-dark text-center">Quantity</div>
                <div class="d-table-cell p-2 pl-5 pr-5 border border-dark text-center">Subtotal</div>
            </div>
            <div class="d-table-row">
                <div class="d-table-cell p-2 border border-dark text-center">100 Mb</div>
                <div class="d-table-cell p-2 border border-dark text-center">{{$lic100->price}} €</div>
                <div class="d-table-cell p-2 border border-dark text-center">{{$order->nr100}}</div>
                <div class="d-table-cell p-2 border border-dark text-center"><div id="subt100">{{ ($lic100->price * $order->nr100 ) }} €</div></div>
            </div>
            <div class="d-table-row">
                <div class="d-table-cell p-2 border border-dark text-center">250 Mb</div>
                <div class="d-table-cell p-2 border border-dark text-center">{{$lic250->price}} €</div>
                <div class="d-table-cell p-2 border border-dark text-center">{{$order->nr250}}</div>
                <div class="d-table-cell p-2 border border-dark text-center"><div id="subt250">{{ ($lic250->price * $order->nr250 ) }} €</div></div>
            </div>
            <div class="d-table-row">
                <div class="d-table-cell p-2 border border-dark text-center">500 Mb</div>
                <div class="d-table-cell p-2 border border-dark text-center">{{$lic500->price}} €</div>
                <div class="d-table-cell p-2 border border-dark text-center">{{$order->nr500}}</div>
                <div class="d-table-cell p-2 border border-dark text-center"><div id="subt500">{{ ($lic500->price * $order->nr500 ) }} €</div></div>
            </div>
            <div class="d-table-row">
                <div class="d-table-cell"></div>
                <div class="d-table-cell"></div>
                <div class="d-table-cell p-2 border border-dark text-center">Total:</div>
                <div class="d-table-cell p-2 border border-dark text-center"><div id="total">{{ ($lic100->price * $order->nr100 ) + ($lic250->price * $order->nr250 ) + ($lic500->price * $order->nr500 ) }} €</div></div>
            </div>
        </div>
    </div>
</div>
</div>

我怎样才能让它正常工作？我必须把它转换成普通的html <table>吗？

Answer 1

Bootstrap在电子邮件环境中不起作用，因为外部样式表通常不起作用。此外，嵌入它甚至不会起作用，因为电子邮件客户端只能接受某些标签。

您需要使其成为一个表格布局，或者一个看起来像卡片的表格布局。

由于您有一个相当大的表，您可以考虑使用卡片布局，以便手机可以很好地处理信息。这里有几个示例，包括代码：https://medium.com/@nathankeenmelb/responsive-datatables-through-card-ui-design-for-email-aca6f3c395a2