【发布时间】：2020-04-06 18:06:12
【问题描述】：
我是前端领域的初学者。我有一个面板，里面有列。 但是，数据与标题不一致。我相信我需要逐渐增加填充以使数据与标题对齐，但我不知道该怎么做。
系统正在使用 bootstrap-3...
代码：
<div id="detail-{{ id }}" class="panel-default quotation-tracking-area header clear-both clearfix">
<div class="panel-heading tracking-header hidden-xs hidden-sm">
<div class="row">
<div class="col-md-1">
<label>{{ i18n 'so' defaultValue="SO #" }}</label>
</div>
<div class="col-md-1">
<label>{{ i18n 'invoice' defaultValue="Invoice #" }}</label>
</div>
<div class="col-md-1">
<label>{{ i18n 'invoice-date' defaultValue="Invoice Date" }}</label>
</div>
<div class="col-md-1">
<label>{{ i18n 'nf' defaultValue="NF #" }}</label>
</div>
<div class="col-md-2">
<label>{{ i18n 'payment-status' defaultValue="Payment Status" }}</label>
</div>
<div class="col-lg-2 col-md-1">
<label>{{ i18n 'epayments-id' defaultValue="ePayments ID #" }}</label>
</div>
<div class="col-md-2">
<label>{{ i18n 'payment-date' defaultValue="Payment Date" }}</label>
</div>
<div class="col-md-1">
<label>{{ i18n 'clearing' defaultValue="Clearing #" }}</label>
</div>
<div class="col-md-1">
<label>{{ i18n 'view' defaultValue="View" }}</label>
</div>
<!-- row -->
</div>
<!-- panel-heading -->
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-1 col-sm-3 col-xs-5 p-right-xs p-left-xs">
<span class="visible-xs visible-sm content-desc">{{ i18n 'so' defaultValue="SO #" }}:</span>
<p>{{ salesOrderNumber }}</p>
</div>
<div class="col-md-1 col-sm-3 col-xs-5 p-right-xs p-left-xs p-bottom-md">
<span class="visible-xs visible-sm content-desc">{{ i18n 'invoice' defaultValue="Invoice #" }}:</span>
<p>{{ invoiceNumber }}</p>
</div>
<div class="col-md-1 col-sm-3 col-xs-5 p-right-xs p-left-xs p-bottom-md hidden-xs hidden-sm">
<span class="visible-xs visible-sm content-desc">{{ i18n 'invoice-date' defaultValue="Invoice Date" }}:</span>
<p>{{ moment invoiceDate format="MMM/DD/YYYY" }}</p>
</div>
<div class="col-md-1 col-sm-3 col-xs-5 p-right-xs p-left-xs p-bottom-md">
<span class="visible-xs visible-sm content-desc">{{ i18n 'nf' defaultValue="NF #" }}:</span>
<p>{{ nf }}</p>
</div>
<div class="col-md-2 col-sm-3 col-xs-5 p-right-xs p-left-xs p-bottom-md">
<span class="visible-xs visible-sm content-desc">{{ i18n 'payment-status' defaultValue="Payment Status" }}:</span>
<p>{{ paymentStatus }}</p>
</div>
<div class="col-lg-2 col-md-1 col-sm-3 col-xs-5 p-right-xs p-left-xs p-bottom-md">
<span class="visible-xs visible-sm content-desc">{{ i18n 'epayments-id' defaultValue="ePayments ID #" }}:</span>
<p>Teste</p>
</div>
<div class="col-md-2 col-sm-3 col-xs-5 p-right-xs p-left-xs p-bottom-md hidden-xs hidden-sm">
<span class="visible-xs visible-sm content-desc">{{ i18n 'payment-date' defaultValue="Payment Date" }}:</span>
<p>{{ moment paymentDate format="MMM/DD/YYYY" }}</p>
</div>
<div class="col-md-1 col-sm-3 col-xs-5 p-right-xs p-left-xs p-bottom-md">
<span class="visible-xs visible-sm content-desc">{{ i18n 'clearing' defaultValue="Clearing #" }}:</span>
<p>{{ clearingDocumentNumber }}</p>
</div>
<div class="col-md-1 col-sm-3 col-xs-5 p-right-xs pl-md-3 p-left-xs p-bottom-md">
<span class="visible-xs visible-sm content-desc">{{ i18n 'view' defaultValue="View" }}:</span>
<i class="material-icons" color="red">picture_as_pdf</i>
</div>
</div>
</div>
</div>
谁能给我一个提示，我该如何解决？非常感谢！！！
【问题讨论】：
-
表格更容易格式化。 getbootstrap.com/docs/4.4/content/tables
-
^ yeh: 行是分开渲染的，所以如果其中一个字符串对于它的容器来说太长了，并且看到它的宽度是相对的，它会扩展为“不同步”其他细胞。表格可以解决它，或者从行 > 列到列 > 行（但是你会遇到同样的高度问题）
-
是的...我知道，但是响应式布局会中断...我已经使用 css 类达到了，我会发布答案...非常感谢！！
标签： css twitter-bootstrap responsive-design frontend