css - 逐渐增加列之间的空间

Question

我是前端世界的初学者。我有一个面板，里面有列。但是，数据与标题不一致。我相信我需要逐渐增加填充以使数据与标题对齐，但我不知道如何正确地做到这一点。

系统正在使用 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>

有人可以给我一个提示，我该如何解决？非常感谢！！！

标签： csstwitter-bootstrapresponsive-designfrontend

Answer 1

我解决了使用一个类来设置子 div 的填充并使用行类删除 div：

.quotation-tracking-item-area div {
  padding: 15px 0 5p
}

<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="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>


    <!-- panel-heading -->
    </div>

    <div class="panel-body">

            <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>