2
私はtypeheadの機能を持つ入力を追加しました。しかし、それを追加した後で応答性[最小化または最大化などのサイズ調整]が無効になります。私を助けてくださいブートストラップ：これらの要素を正しく応答させる方法
$(document).ready(function(){
\t $('input.typeahead').typeahead({
\t \t name: 'accounts',
\t \t local: ['Person1', 'Person2', 'Person3', 'Person4', 'Person5', 'Person6', 'Person7']
\t \t
\t });
}); .bs-example{
//font-family: sans-serif;
position: relative;
margin: 100px;
}
.typeahead, .tt-query, .tt-hint {
border: 2px solid #CCCCCC;
border-radius: 8px;
font-size: 12px;
height: 30px;
line-height: 30px;
outline: medium none;
padding: 8px 12px;
width: 0px;
}
.typeahead {
background-color: #FFFFFF;
}
.typeahead:focus {
border: 2px solid #0097CF;
}
.tt-query {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}
.tt-hint {
color: #999999;
}
.tt-dropdown-menu {
background-color: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 8px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
margin-top: 12px;
padding: 8px 0;
//width: 422px;
}
.tt-suggestion {
font-size: 24px;
line-height: 24px;
padding: 3px 20px;
}
.tt-suggestion.tt-is-under-cursor {
background-color: #0097CF;
color: #FFFFFF;
}
.tt-suggestion p {
margin: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
\t
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
\t <script src="//cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.9.3/typeahead.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
\t
</head>
<body >
<div class="container" >
<div class="panel-group">
<div class="panel panel-primary" >
<div class="panel-heading" >
<h3 class="panel-title" style="text-align: center;">Test Responsive</h3>
</div>
<div class="panel-body">
<form class="form-horizontal" >
<div class="form-group">
<label class="control-label col-sm-3" for="acode">Person</label>
<div class="col-sm-5" id = "empid" >
<div class="input-group ">
<span class="input-group-addon"><i class="glyphicon glyphicon-user" aria-hidden="true"></i></span> \t \t \t \t \t \t \t
<input type="text" class="form-control typeahead tt-query" autocomplete="off" spellcheck="false" name="textemployeeid" id="textemployeeid" placeholder="Enter">
<span class="input-group-btn">
<button type="button" id="search" class="btn btn-xs btn-danger" style="background-color:red;">
<span class="input-group-addon"><i class="glyphicon glyphicon-search " aria-hidden="true"></i></span>
</button>
</span>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>：ここ
は、私が欲しいもののサンプル写真です： 
しかし、今、これは私が取得していますものですthis.Tanksを解決するために
あなたのCSSに、このクラスを追加する必要が
おかげで@hsh。ニースのソリューションですが、慎重に注意を払うと、すべての要素（例：2つのスパンアイコンと入力要素）がグループとして正しく整列されません。何を編集する必要がありますか。もう一度 – user5005768
@ user5005768、 – hsh
ありがとう@hsh。今はその仕事。私はあなたがこの行 'display：block！important;'を追加したのを見ました。 – user5005768