Bootstrap按钮插件在bootstrap模式中没有正确显示

时间:2016-10-03 05:19:42

标签: css twitter-bootstrap

我已将按钮插件放在模态中,(html在下面),但按钮不会按原样连接到输入文本。我尝试将按钮插件放在col-md-6中,它只对桌面视图有帮助,但在移动设备中仍然无法正常工作。有任何想法吗?哪个css规则阻止它加入按钮?

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="exampleModalLabel">Some text: <span id="numberOfMatches"></span>.</h4>
            </div>
            <div class="modal-body">                            
                    <div class="input-group">                                    
                        <input type="text" class="form-control" id="modalCustomerNameInput" placeholder="Customer name..">
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="button" data-request-url="..." onclick="SelectCustomer(customerCode.value, $(this).data('request-url'))"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
                        </span>
                    </div>     
                <div class="list-group" id="customersListInModal">                                 
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>                                
            </div>
        </div>
    </div>
</div>

1 个答案:

答案 0 :(得分:0)

您有一个input和一个button操作,但没有包含它们的<form>标记。

尝试制作button a nchor标记,然后在调用其他函数之前使用preventDefault()方法。