Html 引导风格因自动完成小部件而中断

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

没有自定义样式，只有引导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>

欢迎来到交叉实验室
患者

$（文档）.ready（函数（$）{
$（“#用户名#患者”）。自动完成({
来源：“”，
Minlengh:2，
是的，
打开：功能（事件、用户界面）
{
$（.ui autocomplete”）.css（“z-index”，1000）；
}
});
});

我认为您错过了jQueryUI CSS参考。在应用程序的

部分添加以下CSS，然后重试

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

在.ui autocomplete类中添加一些css或使用@Gopal如何添加一些css，我不是frontender，如何使用typeahead.js？？