Я новичок в мире внешнего интерфейса. У меня есть панель с колоннами внутри. Тем не менее, данные не совпадают с названиями. Я считаю, что мне нужно постепенно увеличивать отступ, чтобы выровнять данные с заголовками, но я не знаю, как это сделать правильно.
Система использует 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>
может кто-нибудь подскажет, как я могу это решить? Большое спасибо !!!