<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<title>bootstrap</title>
<style>
.m-x-3 {margin-right: 3rem !important;margin-left: 3rem !important; }
.m-y-3 {margin-top: 3rem !important;margin-bottom: 3rem !important; }
.p-l-3 {padding-left: 3rem !important; }
.p-r-3 {padding-right: 3rem !important; }
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="panel panel-default no-bg b-a-2 b-gray-dark">
<div class="panel-body m-x-3 m-y-3">
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-12">
<div class="col-xs-8">
<p>To:</p>
</div>
<div class="col-xs-2" style="text-align:right">
<p>Number:</p>
</div>
<div class="col-xs-2" style="text-align:right">
<p>QT-10001</p>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="col-xs-8">
<p>Jefferey Halvorson </p>
</div>
<div class="col-xs-2" style="text-align:right">
<p>Issue Date:</p>
</div>
<div class="col-xs-2" style="text-align:right">
<p>15-Mar-2017</p>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="col-xs-8">
<p>Herzog-Willms </p>
</div>
<div class="col-xs-2" style="text-align:right">
<p> Expiry Date:</p>
</div>
<div class="col-xs-2" style="text-align:right">
<p>15-Mar-2017</p>
</div>
</div></div>
<div class="row">
<div class="col-xs-12">
<div class="col-xs-8">
<p>309 Johnson Ford</p>
</div>
<div class="col-xs-2" style="text-align:right">
<p>Grand Total:</p>
</div>
<div class="col-xs-2" style="text-align:right">
<p>USD 1,469.00</p>
</div>
</div></div>
<div class="row">
<div class="col-xs-12">
<div class="col-xs-8">
<p>Cormiertown, AL 23471-0332</p>
</div>
<div class="col-xs-2" style="text-align:right">
<p>Status:</p>
</div>
<div class="col-xs-2" style="text-align:right">
<p>SENT</p>
</div>
</div></div>
<div class="row">
<div class="col-xs-12">
<div class="col-xs-8">
<p>GSTIN: C-66553</p>
</div>
</div></div>
</div>
</div>
<!-- Table -->
<div class="row">
<div class="col-xs-12 p-l-3 p-r-3">
<table class="table table-condensed">
<thead>
<tr>
<th>Item Code</th>
<th>Description</th>
<th>U.O.M</th>
<th>Unit Price</th>
<th>Qty</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>P-203</td>
<td>HP ENVY 5055 Wireless All-in-One Photo Printer, Instant Ink Ready (M2U85A)HP ENVY 5055 Wireless All-in-One Photo Printer, Instant Ink Ready (M2U85A) HP ENVY 5055 Wireless All-in-One Photo Printer, Instant Ink Ready (M2U85A)</td>
<td>set</td>
<td>275.00</td>
<td>4</td>
<td>1,100.00</td>
</tr>
<tr>
<td>P-203</td>
<td>HP ENVY 5055 Wireless All-in-One Photo Printer, Instant Ink Ready (M2U85A)HP ENVY 5055 Wireless All-in-One Photo Printer, Instant Ink Ready (M2U85A) HP ENVY 5055 Wireless All-in-One Photo Printer, Instant Ink Ready (M2U85A)</td>
<td>set</td>
<td>275.00</td>
<td>4</td>
<td>1,100.00</td>
</tr>
<tr>
<td>P-203</td>
<td>HP ENVY 5055 Wireless All-in-One Photo Printer, Instant Ink Ready (M2U85A)HP ENVY 5055 Wireless All-in-One Photo Printer, Instant Ink Ready (M2U85A) HP ENVY 5055 Wireless All-in-One Photo Printer, Instant Ink Ready (M2U85A)</td>
<td>set</td>
<td>275.00</td>
<td>4</td>
<td>1,100.00</td>
</tr>
<tr>
<td>P-203</td>
<td>HP ENVY 5055 Wireless All-in-One Photo Printer, Instant Ink Ready (M2U85A)HP ENVY 5055 Wireless All-in-One Photo Printer, Instant Ink Ready (M2U85A) HP ENVY 5055 Wireless All-in-One Photo Printer, Instant Ink Ready (M2U85A)</td>
<td>set</td>
<td>275.00</td>
<td>4</td>
<td>1,100.00</td>
</tr>
<tr>
<td>P-203</td>
<td>HP ENVY 5055 Wireless All-in-One Photo Printer, Instant Ink Ready (M2U85A)HP ENVY 5055 Wireless All-in-One Photo Printer, Instant Ink Ready (M2U85A) HP ENVY 5055 Wireless All-in-One Photo Printer, Instant Ink Ready (M2U85A)</td>
<td>set</td>
<td>275.00</td>
<td>4</td>
<td>1,100.00</td>
</tr>
<tr>
<td colspan="3" style="border:0">
<td style="border:0; text-align:right;">Sub Total:</td>
<td colspan="1" style="border:0"></td>
<td style="border:0;text-align:right;">1,100.00</td>
</tr>
<tr>
<td colspan="3" style="border:0">
<td style="border:0; text-align:right;">CGST</td>
<td colspan="1" style="border:0"></td>
<td style="border:0;text-align:right;">10,916.00</td>
</tr>
<tr>
<td colspan="3" style="border:0">
<td style="border:0; text-align:right;">SGST</td>
<td colspan="1" style="border:0"></td>
<td style="border:0;text-align:right;">28476447</td>
</tr>
<tr>
<td colspan="3" style="border:0">
<td style="border:0; text-align:right;">Grand Total:</td>
<td colspan="1" style="border:0"></td>
<td style="border:0;text-align:right;">USD 10,776.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4" style="border: 0;"><strong>Terms and Conditions:</strong></td>
</tr>
<tr>
<td colspan="4" style="border: 0;">1. Delivery will be made within [DAYS] days following [COMPANY NAME] receipt of payment.</td>
</tr>
<tr>
<td colspan="4"style="border: 0;">2. Delivery will be made f.o.b. [COMPANY NAME] facility.</td>
</tr>
<tr>
<td colspan="4" style="border: 0;">3. The general terms and conditions of purchase at [WEBSITE LINK OR REFERENCE TO ATTACHMENT]
apply to this quotation contract.</td>
</tr>
</tfoot>
<!-- END Table -->
</table>
</div>
</div>
</div>
<!-- </div> -->
</div>
</div>
</div>
</body>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
</body>
</html>
从2天开始我一直在此页面上工作，以使其具有响应能力。现在在chrome中，我正在使用检查工具检查此页面的响应。除使用chrome inspect工具的iphone以外，此页面的响应度在所有设备上都很好。现在，我对此页面的响应能力感到困惑。我使用了一个表元素，并为内容写了bootstrap列和行。我把所有这些都放在了panel中。
现在我的问题是：-如何使此页面的响应更多？
答案 0 :(得分：1)
您正在使用表格，表格有一个限制，可以在“移动视图”中进行调整。您可能的解决方案可能是：
这两种方法都难以维护。因此，我们需要在Mobile中调整表格本身的布局本身。这是一个解决方案，其中我更改了表的结构，仅在移动设备中使用CSS更改了表的结构，以更易读的形式显示数据。 演示可从https://jsfiddle.net/8vnkuocb/10/
获得<div class="container">
<table class="table table-condensed" style="padding:20px;">
<thead>
<tr>
<th>Item Code</th>
<th>Description</th>
<th>U.O.M</th>
<th>Unit Price</th>
<th>Qty</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="Item Code">P-203</td>
<td data-title="Description">HP ENVY 5055 Wireless All-in-One Photo Printer, Instant Ink Ready (M2U85A)HP ENVY 5055 Wireless All-in-One Photo Printer, Instant Ink Ready (M2U85A) HP ENVY 5055 Wireless All-in-One Photo Printer, Instant Ink Ready (M2U85A)</td>
<td data-title="U.O.M">set</td>
<td data-title="Unit Price">275.00</td>
<td data-title="Qty">4</td>
<td data-title="Total">1,100.00</td>
</tr>
<tr>
<td data-title="Item Code">P-203</td>
<td data-title="Description">HP ENVY 5055 Wireless All-in-One Photo Printer, Instant Ink Ready (M2U85A)HP ENVY 5055 Wireless All-in-One Photo Printer, Instant Ink Ready (M2U85A) HP ENVY 5055 Wireless All-in-One Photo Printer, Instant Ink Ready (M2U85A)</td>
<td data-title="U.O.M">set</td>
<td data-title="Unit Price">275.00</td>
<td data-title="Qty">4</td>
<td data-title="Total">1,100.00</td>
</tr>
<tr>
<td data-title="Item Code">P-203</td>
<td data-title="Description">HP ENVY 5055 Wireless All-in-One Photo Printer, Instant Ink Ready (M2U85A)HP ENVY 5055 Wireless All-in-One Photo Printer, Instant Ink Ready (M2U85A) HP ENVY 5055 Wireless All-in-One Photo Printer, Instant Ink Ready (M2U85A)</td>
<td data-title="U.O.M">set</td>
<td data-title="Unit Price">275.00</td>
<td data-title="Qty">4</td>
<td data-title="Total">1,100.00</td>
</tr>
<tr>
<td data-title="Item Code">P-203</td>
<td data-title="Description">HP ENVY 5055 Wireless All-in-One Photo Printer, Instant Ink Ready (M2U85A)HP ENVY 5055 Wireless All-in-One Photo Printer, Instant Ink Ready (M2U85A) HP ENVY 5055 Wireless All-in-One Photo Printer, Instant Ink Ready (M2U85A)</td>
<td data-title="U.O.M">set</td>
<td data-title="Unit Price">275.00</td>
<td data-title="Qty">4</td>
<td data-title="Total">1,100.00</td>
</tr>
<tr>
<td>P-203</td>
<td>HP ENVY 5055 Wireless All-in-One Photo Printer, Instant Ink Ready (M2U85A)HP ENVY 5055 Wireless All-in-One Photo Printer, Instant Ink Ready (M2U85A) HP ENVY 5055 Wireless All-in-One Photo Printer, Instant Ink Ready (M2U85A)</td>
<td>set</td>
<td>275.00</td>
<td>4</td>
<td>1,100.00</td>
</tr>
<tr>
<td colspan="3" style="border:0">
</td>
<td style="border:0; text-align:right;">Sub Total:</td>
<td colspan="1" style="border:0"></td>
<td style="border:0;text-align:right;">1,100.00</td>
</tr>
<tr>
<td colspan="3" style="border:0">
</td>
<td style="border:0; text-align:right;">CGST</td>
<td colspan="1" style="border:0"></td>
<td style="border:0;text-align:right;">10,916.00</td>
</tr>
<tr>
<td colspan="3" style="border:0">
</td>
<td style="border:0; text-align:right;">SGST</td>
<td colspan="1" style="border:0"></td>
<td style="border:0;text-align:right;">28476447</td>
</tr>
<tr>
<td colspan="3" style="border:0">
</td>
<td style="border:0; text-align:right;">Grand Total:</td>
<td colspan="1" style="border:0"></td>
<td style="border:0;text-align:right;">USD 10,776.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4" style="border: 0;"><strong>Terms and Conditions:</strong></td>
</tr>
<tr>
<td colspan="4" style="border: 0;">1. Delivery will be made within [DAYS] days following [COMPANY NAME] receipt of payment.</td>
</tr>
<tr>
<td colspan="4" style="border: 0;">2. Delivery will be made f.o.b. [COMPANY NAME] facility.</td>
</tr>
<tr>
<td colspan="4" style="border: 0;">3. The general terms and conditions of purchase at [WEBSITE LINK OR REFERENCE TO ATTACHMENT] apply to this quotation contract.</td>
</tr>
</tfoot>
<!-- END Table -->
</table>
@media (max-width: 767px) {
table, thead, tbody, th,td,tr {
display: block;
}
.table-condensed {
border : 0 none;
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tbody tr {
border: 1px solid #ccc;
td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 25% !important;
white-space: normal;
text-align:left;
&:first-child {
padding-left:0px;
}
&:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 20%;
padding-right: 10px;
white-space: nowrap;
text-align:left;
font-weight: 600;
content: attr(data-title);
}
&.sortRowActive {
background-color: #ddd;
}
}
&.selected-user {
td {
background-color: #ffc !important;
}
}
}
}
}
注意：以上结构将在768px（Ipad肖像）以下应用，您可以根据需要进行修改。