Question

我正在尝试在引导模态内构建一个小表格，但它无法正确显示字段。请查看下面的图像（它是显示的内容）

我的代码：

<div class="modal fade" id="updateToFullVersionModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button aria-hidden="true" data-dismiss  ="modal" class="close" type="button">X</button>
            <h4 id="myModalLabel1" class="modal-title"><strong>Upgrade to Full Version</strong></h4>
        </div>
        <div class="modal-body mx-3">
                <div class='form-row'>
                    <div class="col-xs-12 form-group">
                        <label class='control-label'>Name on Card</label>
                        <input class="form-control" id="CustomerNameCard" type='text' placeholder="Name on Card" >
                    </div>
                    <div class="col-xs-12 form-group">
                        <label class='control-label'>Card Number</label>
                        <input class="form-control" id="CustomerCreditCardNumber" placeholder="Credit Card Number" size="20" type='text' >
                    </div>
                    <div class="col-xs-6 form-group">
                        <label class='control-label'>Zip Code</label>
                        <input class="form-control" id="CustomerCreditCardZip" placeholder="Postal Code" size="6" type='text' >
                    </div>
                </div>
                <div class='form-row'>
                      <div class='col-xs-4 form-group cvc required'>
                        <label class='control-label'>CVC</label>
                        <input id="CustomerCreditCardCVV" class='form-control' placeholder='ex. 311' size='4' type='text' >
                      </div>
                      <div class='col-xs-4 form-group expiration required'>
                        <label class='control-label'>Expiration</label>
                        <input class='form-control' id="CustomerCreditCardExpirationMonth" placeholder='MM' size='2' type='text' >
                      </div>
                      <div class='col-xs-4 form-group expiration required'>
                        <label class='control-label'>&nbsp;</label>
                        <input class='form-control' id="CustomerCreditCardExpirationYear" placeholder='YY' size='2' type='text' >
                      </div>
                </div>
        </div>
        <div class="modal-footer">
            <button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
            <button class="btn btn-primary" type="button"  onClick="updateToFullVersion();">Confirm</button>
        </div>
    </div>
</div>

Idk为什么我在“卡片上的名称”下有一行，而“模式页脚”却不起作用。有人知道为什么会这样吗？

谢谢

Answer 1

您没有平衡标签。尝试关闭输入以开始操作。

这样做：

<input class='form-control' id="CustomerCreditCardExpirationYear" placeholder='YY' size='2' type='text' />

注意以“ />”结尾

引导模态内部的表单未格式化

1 个答案: