Question

对于模态对话框，我具有以下HTML代码：

<div id="modalPaymentStatus" tabindex="-1" class="modal fade" role="dialog">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h4 class="modal-title">Payment Status</h4>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <form>
                <div class="form-row">
                    <div class="form-group col-md-12">
                        <label for="inputOriginator">Originator</label>
                        <input type="text" class="form-control" id="inputOriginator" name="inputOriginator" max-length="11" pattern="^[A-Z]{6,6}[A-Z2-9][A-NP-Z0-9]([A-Z0-9]{3,3}){0,1}$" />
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label for="inputStatus">Transaction Status</label>
                        <input type="text" class="form-control" id="inputStatus" name="inputStatus" placeholder="Status" maxlength="4" />
                    </div>
                    <div class="form-group col-md-6">
                        <label for="inputReason" />
                        <input type="text" class="form-control" id="inputReason" name="inputReason" placeholder="Reason" maxlength="5" />
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group col-md-12">
                        <label for="inputFundsAvailable">Funds Available</label>
                        <input type="text" class="form-control" id="inputFundsAvailable" name="inputFundsAvailable" />
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group col-md-12">
                        <label for="inputForwardedAgent">Forwarded Agent</label>
                        <input type="text" class="form-control" id="inputForwardedAgent" name="inputForwardedAgent" max-length="11" pattern="^[A-Z]{6,6}[A-Z2-9][A-NP-Z0-9]([A-Z0-9]{3,3}){0,1}$" />
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label for="inputValue">Amount</label>
                        <input type="number" class="form-control" id="inputValue" name="inputValue" placeholder="value" maxlength="12" />
                    </div>
                    <div class="form-group col-md-6">
                        <label for="inputCcy" />
                        <input type="text" class="form-control" id="inputCcy" name="inputCcy" placeholder="Ccy" maxlength="3" pattern="^[A-Z]{3,3}$" />
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group col-md-4">
                        <label for="inputFromCcy">FX Details</label>
                        <input type="text" class="form-control" id="inputFromCcy" name="inputFromCcy" placeholder="Ccy" maxlength="3" pattern="^[A-Z]{3,3}$" />
                    </div>
                    <div class="form-group col-md-4">
                        <label for="inputToCcy" />
                        <input type="text" class="form-control" id="inputToCcy" name="inputToCcy" placeholder="Ccy" maxlength="3" pattern="^[A-Z]{3,3}$" />
                    </div>
                    <div class="form-group col-md-4">
                        <label for="inputFXRate" />
                        <input type="number" class="form-control" id="inputFXRate" name="inputFXRate" placeholder="1.00" maxlength="12" />
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group col-md-12">
                        <label for="inputChargeAmount">Charge Amount</label>
                        <input type="text" class="form-control" id="inputChargeAmount" name="inputChargeAmount" placeholder="0.00" max-length="12" />
                    </div>
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>

这就是在IE11中的外观

我在这里做错了什么？ IE11是否有问题？

我希望“状态”和“原因”输入在一行上，以及“值”和ccy以及两个“ Ccy”字段和“ FXRate”一起出现。除此之外，“ form-row” div内的输入字段无法通过单击来集中显示；只有通过使用“ TAB”键在各个字段之间循环...

表单行元素未对齐（引导程序，IE11）

0 个答案: