Angular-UI Bootstrap的模态不会使用bootstrap主题表单

Question

我的模态存在风格问题。

这是我模态的代码：

<script type="text/ng-template" id="contact">
    <div class="modal-header">
        <i class="fa fa-paper-plane"></i> Contact
        <a ng-click="closeModal()" style="float: right;"><i class="fa fa-times text-danger"></i></a>
    </div>
    <div class="modal-body">
        <form class="form-horizontal" role="form">
            <input class="col-md-6" type="text" ng-model="contact.name" placeholder="{{ data.contact.name }}" required />
            <input class="col-md-6"  type="email" ng-model="contact.mail" placeholder="{{ data.contact.mail }}" required />
            <input type="text" ng-model="contact.subject" placeholder="{{ data.contact.subject }}" required />
            <textarea ng-model="contact.message" rows="5" placeholder="{{ data.contact.desc }}" required></textarea>
        <form>
    </div>
    <div class="modal-footer">
        The Footer Goes There
    </div>
</script>

我做错了什么？

编辑： 我正在使用Bootstrap 3.1.1＆amp; UI-Bootstrap 0.11.0，

Answer 1

将class="form-control"添加到您的输入中。

        <div class="modal-body">
            <form class="form-horizontal" role="form">
                <input class="form-control col-md-6" type="text" ng-model="contact.name" placeholder="{{ data.contact.name }}" required />
                <input class="form-control col-md-6" type="email" ng-model="contact.mail" placeholder="{{ data.contact.mail }}" required />
                <input class="form-control" type="text" ng-model="contact.subject" placeholder="{{ data.contact.subject }}" required />
                <textarea class="form-control" ng-model=" contact.message" rows="5" placeholder="{{ data.contact.desc }}" required></textarea>
            </form>
        </div>