Css Bootstrap Div结构中的重叠

我遵循12列规则，以下代码适用于宽度为8列的右侧面板部分。剩余的是左侧的4列面板。它在超过1300像素的分辨率上显示良好，但当收缩时，右面板中的所有控件都重叠。有什么建议吗

<div class="financeScreenRightBlock">
    <div class="form-group row ">
        <label class="col-md-3 control-label">Retail Price</label>
        <div class="col-md-3 ">
            <wj-input-number id="retailPrice" style="border-color: red" [placeholder]="'Retail Price'" [isRequired]="true" [(value)]="application.finance.assetCost.retailPrice" (lostFocus)="retailPrice_Focus();getAmtFin_CalculatePayment()">
            </wj-input-number>
        </div>
        <div class="col-md-3 control-label">
            <label>Trade In</label>
        </div>
        <div class="col-md-2 text-right">
            <wj-input-number id="retailPrice" [placeholder]="'DepositAmount'" [(value)]="application.finance.assetCost.tradeInDepositAmount" [isReadOnly]="true">
            </wj-input-number>
        </div>
        <div class="col-md-1 text-right">
            <button (click)="tradeInWin()" class="btn" style=" padding: 4px 8px;border-radius: 100px;">...</button>
        </div>
    </div>
    <div class="form-group row">
        <label class="col-md-3 control-label">Delivery Charges</label>
        <div class="col-md-3 ">
            <wj-input-number id="deliveryCharges" [placeholder]="'Delivery Charges'" [(value)]="application.finance.assetCost.deliveryAmount" (lostFocus)="getAmtFin_CalculatePayment()">
            </wj-input-number>
        </div>
        <label class="col-md-3 control-label">Deposit</label>
        <div class="col-md-3">
            <wj-input-number id="deposit" [placeholder]="'Deposit'" [(value)]="application.finance.assetCost.cashDepositAmount" (lostFocus)="totalDepositCalculate()">
            </wj-input-number>
        </div>
    </div>
    <div class="form-group row">
        <div class="col-md-3 control-label">
            <label>Accessories</label>
        </div>
        <div class="col-md-2 text-right">
            <wj-input-number id="accessories" [placeholder]="'Accessories'" [(value)]="application.finance.assetCost.totalAccessoryAmount" [isReadOnly]="true">
            </wj-input-number>
        </div>
        <div class="col-md-1 text-right">
            <button class="btn" (click)="accessoriesWin()" style=" padding: 4px 8px;border-radius: 100px;">...</button>
        </div>

        <div class="col-md-3 control-label">
            <label>Total Deposit</label>
        </div>
        <div class="col-md-3">
            <wj-input-number id="totalDeposit" [placeholder]="'Total Deposit'" [(value)]="application.finance.assetCost.totalDepositAmount" [isReadOnly]="true">
            </wj-input-number>
        </div>

    </div>
    <div class="form-group row">
        <div class="col-md-3 control-label custom-checkbox">
            <input type="checkbox" id="onroad" name="onroad" [(ngModel)]="application.finance.onRoadCostInclusionIndicator" (ngModelChange)="getAmtFin_CalculatePayment()" />
            <label for="onroad">On Roads</label>
        </div>
        <div class="col-md-2 text-right">
            <wj-input-number [placeholder]="'Interest Rate'" [isRequired]="true" [isReadOnly]="true" (lostFocus)="interestRate_Focus()" [value]="((application.finance.onRoadCostInclusionIndicator)?(application.finance.assetCost.registrationAmount*1+application.finance.financeContract.financeTax.stampDutyAmount*1):0)">
            </wj-input-number>

        </div>
        <div class="col-md-1 text-right">
            <button class="btn" (click)="onRoadWin()" style=" padding: 4px 8px;border-radius: 100px;">...</button>
        </div>

        <div class="col-md-3 control-label custom-checkbox">
            <input type="checkbox" id="feebox" name="feebox" [(ngModel)]="application.fee.showIndicator" (ngModelChange)="getFeeCheckbox()" />
            <label for="feebox">Fee</label>
        </div>
        <div class="col-md-2 text-right">
            <wj-input-number id="fee" [placeholder]="'fee'" [(value)]="application.fee.totalFeeAmount" [isReadOnly]="true">
            </wj-input-number>

        </div>
        <div class="col-md-1 text-right">
            <button (click)="feeWin()" class="btn" style=" padding: 4px 8px;border-radius: 100px;">...</button>
        </div>
    </div>

    <div class="form-group row">
        <div class="col-md-3 control-label custom-checkbox">
            <input type="checkbox" id="insuranceCheckbox" name="insuranceCheckbox" [(ngModel)]="application.finance.financeContract.financeInsurance.showIndicator" (ngModelChange)="getAmtFin_CalculatePayment()" />
            <label for="insuranceCheckbox">Insurance</label>
        </div>
        <div class="col-md-2 text-right">
            <wj-input-number [placeholder]="'Insurance'" [isRequired]="true" [isReadOnly]="true" (lostFocus)="interestRate_Focus()" [value]="((application.finance.financeContract.financeInsurance.showIndicator)?application.finance.financeContract.totalFinancePremiumAmount:0)">
            </wj-input-number>

        </div>
        <div class="col-md-1 text-right">
            <button (click)="insuranceWin_close();insuranceWin();" class="btn" style=" padding: 4px 8px;border-radius: 100px;">...
                        </button>
        </div>

        <div class="col-md-3 control-label custom-checkbox">

            <label for="feebox">Amount Financed</label>
        </div>
        <div class="col-md-3 text-right">
            <wj-input-number [placeholder]="'Amount Financed'" [isRequired]="true" [isReadOnly]="true" [(value)]="application.finance.financeContract.financedAmount">
            </wj-input-number>

        </div>

    </div>

</div>

零售价
置换
...
送货费
押金
配件
...
总存款
在路上
...
费用
...
保险
...
融资额

您可以向div添加更多css类，以实现所需的外观/行为。您可以使用chrome开发者工具查看页面在较小设备上的外观。我通常先为我的移动设备页面创建一个框架，然后再为平板电脑等设置布局

范例 col-xs-2 col-md-4 col-lg-6可以位于同一类定义上。

---

希望能有所帮助。

发生这种情况是因为您使用的是

col-md-x

，也就是说，您使用的是中等大小的列。对于中等尺寸的屏幕，您应使用

col-md-x

；对于大屏幕，您应使用

col-lg-x

；对于小屏幕，您应使用

col-sm-x

。例如，如果您想在选项卡中正确显示页面，则应在笔记本电脑屏幕上使用

col-md-x

和

col-lg-x

。 此外，我认为最好将

div正确嵌套。您是说您有一个4列面板和一个8列面板。例如，您的代码应该如下所示

<div class="row">
    <div class="col-sm-4 col-md-4 col-lg-4">
        <!---Do your stuff here-->
    </div>
    <div class="col-sm-8 col-md-8 col-lg-8">
        <!--you can do further nesting here-->
        <!--example-->
        <div class="col-sm-4 col-md-4 col-lg-4">
            <p>some more code goes here</p>
        </div>
        <div class="col-sm-7 col-sm-offset-1 col-md-7 col-md-offset-1 col-lg-7 col-lg-offset-1">
            <p>above div shows how to give blank columns if you want your page to have some blank spaces between columns. use col-sm/md/lg-offset-x for this.</p>
        </div>
    </div>
</div>


这里还有一些代码

上面的div显示了如果您希望页面的列之间有一些空格，如何为空白列指定。为此使用列sm/md/lg-offset-x


我知道您正在使用angular ui引导，上面的示例是针对twitter引导的。记住这一点，我认为嵌套div示例将对您有所帮助。干杯
 其实我不是从零开始的。有人在做这件事，我需要在这个应用程序中做一些修复。感谢你节省了很多时间，我只使用了一个类来创建12列模板。谢谢，不用提：）…这个网站已经为我们节省了很多时间。