Question

我正在使用codeigniter和bootstrap的项目工作，我制作了一个自动完成系统，但css看起来像这样坏了

https://gyazo.com/4af7ae2bbdfd5547233d192b80ef947e

没有自定义样式，只有bootstrap min css，这里是我的查看html代码，看起来应该是任何帮助都会受到赞赏

<h2>Welcome to Crossover Laboratory</h2>
<div class="row">
<div class="col-md-1">
&nbsp;
</div>
<div class='col-md-10 text-center'>
<h3>Patients</h3>
    <?php echo $error2; ?>
    <?php 
    $attributes2 = array(
    "class"=>"form-horizontal", 
    "id" => "LoginForm2",
    "name" => "LoginForm2",
    "method" => "post"
    ); 
    echo form_open("laboratory/patients", $attributes2); ?>
    <div class="form-group">
    <input type="text" name="username_patients" id="username_patients" class="ui-autocomplete-input" value="" required placeholder="Name" />
    <p id="patient_name"></p>
    </div>

    <div class="form-group">

    <input type="password" name="password_patients" id="password_patients" value="" required placeholder="Code"/>
    </div>
    <div class="form-group">
    <?php echo form_submit("Login2","Login"); ?>    
    </div>
    <?php echo form_close(); ?>

</div>


<div class="col-md-1">
&nbsp;
</div>
</div>
<script type="text/javascript">

$(document).ready(function($) {

    $("#username_patients").autocomplete({
        source: '<?php echo site_url('laboratory/autocomplete'); ?>',
        minlenght: 2,
        html: true,
        open: function(event, ui) 
        {
            $(".ui-autocomplete").css("z-index",1000);  
        }
    });

});
</script>

Answer 1

我认为你错过了jQueryUI CSS引用。在您的应用 <head> 部分添加以下CSS并尝试..

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

Bootstrap样式因自动完成小部件而中断

1 个答案: