Bootstrap Style 被自动完成小部件破坏答案

【问题标题】：Bootstrap Style broken with autocomplete widgetBootstrap Style 被自动完成小部件破坏
【发布时间】：2015-09-01 03:51:03
【问题描述】：

我正在使用 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>

【问题讨论】：

向 .ui-autocomplete 类添加一些 css 或使用 twitter.github.io/typeahead.js
@Gopal 如何添加一些 CSS，我不是前端，如何使用 typeahead.js？？

标签： html css twitter-bootstrap codeigniter

【解决方案1】：

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

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

【讨论】：